html5 css3旋钮2
日期：2014-05-17 浏览次数：20835 次
?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Cross-browser CSS gradient buttons demo - Redteamdesign</title>
<style>
body {
background: #e5e5e5;
text-align: center;
} ?/*----------------------------*/
.button {
margin: 10px;
text-decoration: none;
font: bold 1.5em 'Trebuchet MS', Arial, Helvetica;
/*更变按钮的大小来个调整位置*/
display: inline-block;
text-align: center;
color: #fff;
border: 1px solid #9c9c9c; /*边框样式 */
border: 1px solid rgba(0, 0, 0, 0.3);
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
box-shadow: 0 0 .05em rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0 0 .05em rgba(0, 0, 0, 0.4);
-webkit-box-shadow: 0 0 .05em rgba(0, 0, 0, 0.4);
}
?
.button,.button span {
-moz-border-radius: .3em;
border-radius: .3em;
}
?
.button span {
border-top: 1px solid #fff; /* 上边框样式 */
border-top: 1px solid rgba(255, 255, 255, 0.5);
display: block;
padding: 0.5em 2.5em; /* 对齐 */
background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, rgba(0, 0, 0,
0.05) ), color-stop(.25, transparent), to(transparent) ),
-webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(0, 0, 0,
0.05) ), color-stop(.25, transparent), to(transparent) ),
-webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent),
color-stop(.75, rgba(0, 0, 0, 0.05) ) ),
-webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent),
color-stop(.75, rgba(0, 0, 0, 0.05) ) );
background-image: -moz-linear-gradient(45deg, rgba(0, 0, 0, 0.05) 25%,
transparent 25%, transparent ),
-moz-linear-gradient(-45deg, rgba(0, 0, 0, 0.05) 25%, transparent 25%,
transparent ),
-moz-linear-gradient(45deg, transparent 75%, rgba(0, 0, 0, 0.05) 75% ),
-moz-linear-gradient(-45deg, transparent 75%, rgba(0, 0, 0, 0.05) 75%
);?
-moz-background-size: 3px 3px;
-webkit-background-size: 3px 3px;
background-size: 3px 3px;
}
?
.button:hover {
