button的css规范样式

最新推荐文章于 2024-12-11 12:37:42 发布

dichusuan7197

最新推荐文章于 2024-12-11 12:37:42 发布

阅读量163

点赞数

原文链接：http://www.cnblogs.com/scieart/archive/2012/08/15/2639375.html

版权

本文介绍了一种使用纯CSS实现按钮样式的规范，包括橙色和灰色两种风格的按钮及其不同状态下的样式变化，无需依赖图片资源。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

button的规范样式，以后button不再需要图片啦，只需要这些代码就可以实现。换色样式简单方便。

<style>

.button {
    display: inline-block;
    outline: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    font: 13px/100% Arial, Helvetica, sans-serif;
    padding: .5em 2em .55em;
    text-shadow: 0 1px 1px rgba(0,0,0,.3);
    -webkit-border-radius: .5em;
    -moz-border-radius: .5em;
    border-radius: .5em;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.button:hover {
    text-decoration: none;
}
.button:active {
    position: relative;
    top: 1px;
}
.orange {
    font-weight: bold;
    color: #fef4e9;
    border: solid 1px #da7c0c;
    background: #f78d1d;
    background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
    background: -moz-linear-gradient(top,  #faa51a,  #f47a20);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
}
.orange:hover {
    background: #f47c20;
    background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
    background: -moz-linear-gradient(top,  #f88e11,  #f06015);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
}
.orange:active {
    color: #fcd3a5;
    background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
    background: -moz-linear-gradient(top,  #f47a20,  #faa51a);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
}

.gray {
    text-decoration: none;
    color: #717174;
    border: solid 1px #a3a3a7;
    background: #f78d1d;
    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#d2d2d2));
    background: -moz-linear-gradient(top,  #fff,  #d2d2d2);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff', endColorstr='#d2d2d2');
}
.gray:hover {
    text-decoration: none;
    background: #717174;
    background: -webkit-gradient(linear, left top, left bottom, from(#eeeeee), to(#c1c1c1));
    background: -moz-linear-gradient(top,  #eeeeee,  #c1c1c1);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#c1c1c1');
}
.gray:active {
    text-decoration: none;
    color: #717174;
    background: -webkit-gradient(linear, left top, left bottom, from(#c1c1c1), to(#dddddd));
    background: -moz-linear-gradient(top,  #c1c1c1,  #dddddd);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#c1c1c1', endColorstr='#dddddd');
}

</style>