css揭秘之按钮的实现技巧

时间:2024-12-01 13:03:55

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>