您的位置：首页 > Web前端 > CSS

精通CSS 第五章立体按钮

2017-08-09 09:35 288 查看

有效的链接变化

a:link,a:visited{color:red;}
a:hover,a:focus,a:active{color:blue;}
//顺序调换不起作用

简单按钮

<style>
p{margin: 5em;}
a{ font-size: 30px;font-weight: 500;}
a.button{
display: block;
width: 6.6em;
line-height: 1.4;
color: #ffffff;
text-decoration: none;
text-align: center;
/*初始状态*/
border: 1px solid #66a300;
background-color: #8cca12;
}
/*鼠标浮动*/
a.button:hover{
background-color: #f7a300;
border-color: #ff7400;
}
/*激活*/
a.button:active{
background-color: #a7a7a7;
border-color: #868686;
}
</style>
</head>
<body>
<p><a href="#" class="button">Book Now »</a></p>
</body>

纯图片按钮

<style>
p{margin: 5em;}
a{ font-size: 30px;font-weight: 500;}
a.button{
display: block;
width: 202px;/*根据图片尺寸*/
height: 72px;
background: url("button.png");
}
/*鼠标浮动*/
a.button:hover{
background-image: url("button-over.png");
}
/*激活*/
a.button:active{
background-image: url("button-active.png");
}
</style>
</head>
<body>
<p><a href="#" class="button"></a></p>
</body>

大图片background-position做按钮

<style>
p{margin: 5em;}
a{ font-size: 30px;font-weight: 500;}
a.button{
display: block;
width: 203px;/*根据图片尺寸*/
height: 72px;
background:url("buttons.png") -203px 0 no-repeat;
/*取大图片-203px位置 */
}
/*鼠标浮动*/
a.button:hover{
background-position: right top;
}
/*激活*/
a.button:active{
background-position: left top;
}
</style>
</head>
<body>
<p><a href="#" class="button"></a></p>
</body>

纯css做按钮

<style>
p{margin: 5em;}
a{ font-size: 30px;font-weight: 500;}
a.button{
display: block;
width: 6.6em;
height: 1.4em;
line-height: 1.4;
text-align: center;
text-decoration: none;
font-weight: 600;
border: 1px solid #66a300;
color: white;
background-color: #8cca12;
/*描绘最初效果*/
-webkit-border-radius: 6px;/*圆角*/
-webkit-text-shadow: 2px 2px 2px #66a300;/*文字阴影*/
-webkit-box-shadow: 2px 2px 2px #ccc;/*按钮阴影*/
/*过渡*/
background-image: -webkit-gradient(linear,left top,left bottom,
from(#abe142),to(#67a400));
/*翻转*/
-webkit-box-reflect: below 2px -webkit-gradient(linear, left top,
left bottom, from(transparent), color-stop(0.62, transparent), to(white));

}
/*鼠标浮动*/
a.button:hover{
background-color: #f7a300;
text-shadow: 2px 2px 2px #ff7400;
border-color: #ff7400;
background-image: -webkit-gradient(linear, left top, left bottom,
from(#f7a300), to(#ff7400));
}
/*激活*/
a.button:active{
background-color: #a7a7a7;
text-shadow: 2px 2px 2px #868686;
border-color: #868686;
background-image: -webkit-gradient(linear, left top, left bottom,
from(#a7a7a7), to(#868686));
}
</style>
</head>
<body>
<p><a href="#" class="button">Book Now »</a></p>
</body>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

精通CSS 第五章 立体按钮

精通CSS 第五章立体按钮