css揭秘之按钮的实现技巧

css揭秘之按钮的实现技巧_第1张图片

<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>

你可能感兴趣的:(css揭秘之按钮的实现技巧)