码迷,mamicode.com
首页 > Web开发 > 详细

简单实用的纯css按钮效果

时间:2016-12-11 01:55:15      阅读:195      评论:0      收藏:0      [点我收藏+]

标签:rgb   技术分享   display   代码   ddd   纯css   http   开发者   div   

在许多网站中都需要实用到按钮,一个好看实用的css按钮即可以给访问者以美感,又可以方便开发者。下面就是一个纯css按钮,需要的可以参考。

技术分享技术分享

css代码

.div {
    display: inline-block;
    padding: .3em .5em;
    background-image: linear-gradient(#ddd, #bbb);
    border: 1px solid rgba(0,0,0,.2);
    border-radius: .3em;
    box-shadow: 0 1px white inset;
    text-align: center;
    text-shadow: 0 1px 1px black;
    color:white;
    font-weight: bold;
}
.div:active{
    box-shadow: .05em .1em .2em rgba(0,0,0,.6) inset;
    border-color: rgba(0,0,0,.3);
    background: #bbb;
}

html代码

<div class="div">Button</div>

其他几种按钮

技术分享

背景颜色

background-image: linear-gradient(#f5c153, #ea920d);

技术分享

背景颜色

 background-image: linear-gradient(#8eb349, #5f7c22);

技术分享

背景颜色

background-image: linear-gradient(#fbb2d0, #e779aa);

 

简单实用的纯css按钮效果

标签:rgb   技术分享   display   代码   ddd   纯css   http   开发者   div   

原文地址:http://www.cnblogs.com/shengliang74/p/6158508.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!