css揭秘之按钮的实现技巧

简介:

422101-20160616234050229-11870551.png

<html>
    <title>css</title>
    <style>
        button{
            padding: .3em .8em;
            border: 1px solid #446d88;
            background-color: #58a;
            border-radius: .2em;
            box-shadow: 0 .05em .25em gray;
            color:white;
            text-shadow: 0 -.05em .05em #335166;
            font-size: 125%;
            line-height: 1.5;
        }
        
        button.ok{
            background-color: #c00;
        }
        
        button.cancel{
            background-color: #6b0;
        }
    </style>
    <body>
        <button>default</button>
        
        <button class="ok">ok</button>
        
        <button class="cancel">cancel</button>
    </body>

</html>



本文转自TBHacker博客园博客,原文链接:http://www.cnblogs.com/jiqing9006/p/5592537.html,如需转载请自行联系原作者

相关文章
|
1月前
css3鼠标悬停图片特效源码
css3鼠标悬停图片特效,图片悬停效果源码,可以在网页上面作为自己的动态加载名片,放到侧边栏或者网站合适的位置即可
14 0
css3鼠标悬停图片特效源码
|
5月前
|
前端开发
css实现平行四边形按钮
css实现平行四边形按钮
35 0
|
6月前
|
前端开发
CSS3 按钮
CSS3 按钮
29 0
|
8月前
|
前端开发
css实现的错号图标(3)
css实现的错号图标(3)
103 0
|
8月前
|
前端开发
css实现的垃圾桶图标
css实现的垃圾桶图标
98 0
|
9月前
|
移动开发 前端开发 HTML5
css点击换色
css点击换色
43 0
|
10月前
|
前端开发
css实现立体感按钮
css实现立体感按钮
141 0
css实现立体感按钮
|
JavaScript 前端开发
纯CSS设计按钮
不需要图片和js技术。能够兼容各种浏览器,不兼容opera.
98 0
|
前端开发
css3实现摇动效果的下拉菜单
使用css3的动画效果,实现下来菜单的摇动效果。
101 0
css3实现摇动效果的下拉菜单
|
前端开发
一篇文章带你了解CSS3按钮知识
一篇文章带你了解CSS3按钮知识
275 0
一篇文章带你了解CSS3按钮知识