精通CSS 第五章立体按钮

最新推荐文章于 2019-08-29 22:50:20 发布

qq_34664510

最新推荐文章于 2019-08-29 22:50:20 发布

阅读量193

点赞数

分类专栏：精通css-高级web标准解决方案-代码

本文链接：https://blog.csdn.net/qq_34664510/article/details/76947023

版权

精通css-高级web标准解决方案-代码专栏收录该内容

3 篇文章 0 订阅

订阅专栏

有效的链接变化

a:link,a:visited{color:red;}
a:hover,a:focus,a:active{color:blue;}
//顺序调换不起作用

简单按钮

  <style>
        p{margin: 5em;}
        a{ font-size: 30px;font-weight: 500;}
        a.button{
            display: block;
            width: 6.6em;
            line-height: 1.4;
            color: #ffffff;
            text-decoration: none;
            text-align: center;
           /*初始状态*/
            border: 1px solid #66a300;
            background-color: #8cca12;
      }
        /*鼠标浮动*/
        a.button:hover{
            background-color: #f7a300;
            border-color: #ff7400;
        }
        /*激活*/
        a.button:active{
            background-color: #a7a7a7;
            border-color: #868686;
        }
 </style>
    </head>
    <body>
        <p><a href="#" class="button">Book Now &raquo;</a></p>
    </body>

这里写图片描述
纯图片按钮

    <style>
        p{margin: 5em;}
        a{ font-size: 30px;font-weight: 500;}
        a.button{
            display: block;
            width: 202px;/*根据图片尺寸*/
            height: 72px;
            background: url("button.png");
      }
        /*鼠标浮动*/
        a.button:hover{
            background-image: url("button-over.png");
        }
        /*激活*/
        a.button:active{
            background-image: url("button-active.png");
        }
 </style>
    </head>
    <body>
        <p><a href="#" class="button"></a></p>
    </body>

这里写图片描述
大图片background-position做按钮

    <style>
        p{margin: 5em;}
        a{ font-size: 30px;font-weight: 500;}
        a.button{
            display: block;
            width: 203px;/*根据图片尺寸*/
            height: 72px;
            background:url("buttons.png") -203px 0 no-repeat;
            /*取大图片-203px位置 */
      }
        /*鼠标浮动*/
        a.button:hover{
           background-position: right top;
        }
        /*激活*/
        a.button:active{
           background-position: left top;
        }
    </style>
    </head>
    <body>
        <p><a href="#" class="button"></a></p>
    </body>

这里写图片描述
纯css做按钮

    <style>
    p{margin: 5em;}
    a{ font-size: 30px;font-weight: 500;}
    a.button{
        display: block;
        width: 6.6em;
        height: 1.4em;
        line-height: 1.4;
        text-align: center;
        text-decoration: none;
        font-weight: 600;
        border: 1px solid #66a300;
        color: white;
        background-color: #8cca12;
        /*描绘最初效果*/
        -webkit-border-radius: 6px;/*圆角*/
        -webkit-text-shadow: 2px 2px 2px #66a300;/*文字阴影*/
        -webkit-box-shadow: 2px 2px 2px #ccc;/*按钮阴影*/
        /*过渡*/
        background-image: -webkit-gradient(linear,left top,left bottom, from(#abe142),to(#67a400));
        /*翻转*/
        -webkit-box-reflect: below 2px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.62, transparent), to(white));

    }
    /*鼠标浮动*/
    a.button:hover{
        background-color: #f7a300;
        text-shadow: 2px 2px 2px #ff7400;
        border-color: #ff7400;
        background-image: -webkit-gradient(linear, left top, left bottom, from(#f7a300), to(#ff7400));
    }
    /*激活*/
    a.button:active{
        background-color: #a7a7a7;
        text-shadow: 2px 2px 2px #868686;
        border-color: #868686;
        background-image: -webkit-gradient(linear, left top, left bottom, from(#a7a7a7), to(#868686));
    }
</style>
</head>
<body>
    <p><a href="#" class="button">Book Now &raquo;</a></p>
</body>

这里写图片描述

qq_34664510

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
精通CSS 第五章立体按钮

有效的链接变化a:link,a:visited{color:red;}a:hover,a:focus,a:active{color:blue;}//顺序调换不起作用简单按钮 <style> p{margin: 5em;} a{ font-size: 30px;font-weight: 500;} a.button{ dis
复制链接

扫一扫