css3记录页面中常用样式的写法

2020年8月4日 飞飞 阅读(706)
知识付费主题,优惠促销中:xx-blog主题

在用wordpress开发主题的时候,经常避免不了要写各种样式的按钮,下面记录一下用按钮样式的写法,以后用的时候直接拿来即可。

HTML和CSS代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            *{margin: 0; padding: 0;}
            .container{
                margin: 0 auto;
                padding-top: 30px;
                width: 1000px;
            }
            .btn{
                display: inline-block;
                padding: 0 30px;
                width: auto;
                height: 35px;
                font: 14px/35px 'microsoft yahei';
                color: #fff; border: 0;
                border-radius: 3px;
                text-align: center;
                cursor: pointer;
                -webkit-transition: all .5s;
                -moz-transition: all .5s;
                -ms-transition: all .5s;
                -o-transition: all .5s;
                transition: all .5s;
            }
            .blueBtn{
                background: #5dcbff;
            } /*蓝色按钮*/
            .blueBtn:hover{
                background: #40b6ee;
            }
            .orangeBtn{
                background: #ff5700;
            }/*橙色按钮*/
            .orangeBtn:hover{
                background: #e25d18;
            }
            .violetBtn{
                background: #6680ff;
            }/*紫色按钮*/
            .violetBtn:hover{
                background: #425de0;
            }
            .grayBtn{
                background: #999;
            }/*灰色按钮*/
            .grayBtn:hover{
                background: #7f7f7f;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <span class="btn blueBtn">蓝色按钮</span>
            <span class="btn orangeBtn">橙色按钮</span>
            <span class="btn violetBtn">紫色按钮</span>
            <span class="btn grayBtn">灰色按钮</span>
        </div>
    </body>
</html>

 


关注微信公众号『xx主题网

第一时间了解最新网络动态
关注博主不迷路~

未经允许不得转载:xx主题网 » css3记录页面中常用样式的写法
分享到:

评论抢沙发

要发表评论,您必须先

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

扫码关注微信公众号

扫描关注xx主题网