且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

css揭秘之按钮的实现技巧

更新时间:2022-09-12 16:35:36

css揭秘之按钮的实现技巧

<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,如需转载请自行联系原作者