如何创建Hotmail“登录”按钮样式？

Question

如何创建类似于hotmail上的“登录”按钮的按钮样式？

它看起来像它使用一些css3渐变。样式和状态类似于悬停，活动等的屏幕截图？

有人可以提供一些示例代码？谢谢！

Answer 1

http://jsfiddle.net/9bahD/更多颜色的发挥，但你永远不知道它是否会在所有的浏览器

的多个按钮http://www.webdesignerwall.com/demo/css-buttons.html#

<a href="#" class="button blue">Log in</a> 


.button { 
    display: inline-block; 
    zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */ 
    *display: inline; 
    vertical-align: baseline; 
    margin: 0 2px; 
    outline: none; 
    cursor: pointer; 
    text-align: center; 
    text-decoration: none; 
    font: 14px/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; 
} 

.bigrounded { 
    -webkit-border-radius: 2em; 
    -moz-border-radius: 2em; 
    border-radius: 2em; 
} 
.medium { 
    font-size: 12px; 
    padding: .4em 1.5em .42em; 
} 
.small { 
    font-size: 11px; 
    padding: .2em 1em .275em; 
} 


/* blue */ 
.blue { 
    color: #d9eef7; 
    border: solid 1px #0076a3; 
    background: #0095cd; 
    background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5)); 
    background: -moz-linear-gradient(top, #00adee, #0078a5); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5'); 
} 
.blue:hover { 
    background: #007ead; 
    background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e)); 
    background: -moz-linear-gradient(top, #0095cc, #00678e); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0095cc', endColorstr='#00678e'); 
} 
.blue:active { 
    color: #80bed6; 
    background: -webkit-gradient(linear, left top, left bottom, from(#0078a5), to(#00adee)); 
    background: -moz-linear-gradient(top, #0078a5, #00adee); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0078a5', endColorstr='#00adee'); 
} 

Answer 2

渐变按钮与状态（活跃，悬停）：http://webdesignerwall.com/tutorials/css3-gradient-buttons