CSS Button
程序员文章站
2022-07-14 08:54:27
...
CSS Button
<html>
<head>
<style type="text/css">
.btn {
font-size:16px;
font-family:Arial;
font-weight:normal;
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
border:1px solid #dcdcdc;
padding:9px 18px;
text-decoration:none;
background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #ededed), color-stop(100%, #dfdfdf) );
background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
background:-ms-linear-gradient( top, #ededed 5%, #dfdfdf 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
background-color:#ededed;
color:#777777;
display:inline-block;
text-shadow:1px 1px 0px #ffffff;
-webkit-box-shadow:inset 1px 1px 0px 0px #ffffff;
-moz-box-shadow:inset 1px 1px 0px 0px #ffffff;
box-shadow:inset 1px 1px 0px 0px #ffffff;
}
.btn:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #dfdfdf), color-stop(100%, #ededed) );
background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
background:-ms-linear-gradient( top, #dfdfdf 5%, #ededed 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
background-color:#dfdfdf;
}
.btn:active {
position:relative;
top:1px;
}
/* CSS按钮生成器 */
</style>
</head>
<body>
<a href="#" class="btn">css button</a>
</body>
</html>
下一篇： 多线程 & 异步调用 的理解