仅使用CSS的渐变按钮

Question

是否可以使用CSS3完全创建这种按钮（具有3种状态和可变宽度）？或者至少避免每个按钮都有图像？

好的cssbuttongenerator和jsfiddle我在这一点上：http://jsfiddle.net/Wdzje/但它仍然不是我想要的地方（颜色，边界）！有人可以帮我吗？行动状态尚未准备就绪

Answer 1

是的，有可能，有很多资源可以帮助您实现这一目标。查看http://www.cssbuttongenerator.com/

或者扩展一下：

按钮：

<a href="#" class="myButton">my button</a>

CSS

.myButton {
-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
box-shadow:inset 0px 1px 0px 0px #ffffff;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
background-color:#ededed;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #dcdcdc;
display:inline-block;
color:#777777;
font-family:arial;
font-size:15px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
text-shadow:1px 1px 0px #ffffff;
}

.myButton:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
background-color:#dfdfdf;
}

.myButton:active {
position:relative;
top:1px;
}

Answer 2

是的，这是可能的。

你可以使用像半径，渐变，文字阴影，框阴影这样的css3属性来创建你想要的按钮......

看看小提琴：http://jsfiddle.net/vLVLJ/

这是标记，以防链接死亡：

<div class="button">
    button!
</div>

CSS：

.button {
    border: 1px solid #696;
    padding: 60px 0;
    text-align: center; width: 200px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow: #666 0px 2px 3px;
    -moz-box-shadow: #666 0px 2px 3px;
    box-shadow: #666 0px 2px 3px;
    background: #EEFF99;
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#EEFF99), to(#66EE33));
    background: -webkit-linear-gradient(#EEFF99, #66EE33);
    background: -moz-linear-gradient(#EEFF99, #66EE33);
    background: -ms-linear-gradient(#EEFF99, #66EE33);
    background: -o-linear-gradient(#EEFF99, #66EE33);
    background: linear-gradient(#EEFF99, #66EE33);
}

Answer 3

试试这个 - http://css3button.net/

Answer 4

这是使用CSS3的3个工作状态的按钮。

查看fiddle

简单的HTML

<button>
    I am a button!
</button>

这是CSS

button {
    cursor: pointer;
    border: none;
    color: #fff;
    padding: 10px 20px;
    font-weight: 700;
    text-align: center;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    box-shadow: 2px 2px 3px #999;
    background: #32CD32;
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#32CD32), to(#32AB32));
    background: -webkit-linear-gradient(#32CD32, #32AB32);
    background: -moz-linear-gradient(#32CD32, #32AB32);
    background: -ms-linear-gradient(#32CD32, #32AB32);
    background: -o-linear-gradient(#32CD32, #32AB32);
    background: linear-gradient(#32CD32, #32AB32);
    -webkit-transition: all 500ms ease-in-out;
    -moz-transition: all 500ms ease-in-out;
    transition: all 500ms ease-in-out;
}
button:hover {
    background: #32AB32;
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#32AB32), to(#32CD32));
    background: -webkit-linear-gradient(#32AB32, #32CD32);
    background: -moz-linear-gradient(#32AB32, #32CD32);
    background: -ms-linear-gradient(#32AB32, #32CD32);
    background: -o-linear-gradient(#32AB32, #32CD32);
    background: linear-gradient(#32AB32, #32CD32);
}
button:active {
    background: #329932;
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#32AB32), to(#329932));
    background: -webkit-linear-gradient(#32AB32, #329932);
    background: -moz-linear-gradient(#32AB32, #329932);
    background: -ms-linear-gradient(#32AB32, #329932);
    background: -o-linear-gradient(#32AB32, #329932);
    background: linear-gradient(#32AB32, #329932);
}