css 选择器总结_个人文章 - SegmentFault 思否
1. 基础选择器(1) 通配符选择器 * {}(2) 类选择器 .类名{}(3) ID选择器(具有唯一性) .ID {}(4) 元素选择器(标签选择器) div {}2. 关系选
顺晟科技
2021-07-31 07:32:30
252
CSS3按钮选择器,通过CSS3新特性把普通的html链接设计成视觉上平滑的按钮m包括梯度背景、圆角、下拉阴影,以及转换等效果。支持CSS 3动画,可以把按钮逐渐地从默认状态变为悬停状态,你可以在不使用如上图那样的图片的情况下得到一个漂亮的按钮。
上图
CSS3 Magic
button {
-moz-border-radius: 25px;
-moz-box-shadow: #6E7849 0px 0px 10px;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-webkit-border-radius: 25px;
-webkit-box-shadow: #6E7849 0 0 10px;
-webkit-transition: all 0.5s ease;
background-color: #6E7849;
background-image: -moz-linear-gradient(90deg, #B9C788, #6E7849);
background-image: -ms-linear-gradient(90deg, #B9C788, #6E7849);
background-image: -o-linear-gradient(90deg, #B9C788, #6E7849);
background-image: -webkit-linear-gradient(90deg, #B9C788, #6E7849);
background-image: linear-gradient(90deg, #B9C788, #6E7849);
border-radius: 25px;
border: 2px solid #4a5032;
box-shadow: #6E7849 0px 0px 10px;
color: #ffffff;
display: inline-block;
font-size: 4em;
margin: auto;
padding: 15px;
text-decoration: none;
text-shadow: #000000 5px 5px 15px;
transition: all 0.5s ease;
}
.button:hover {
padding: 15px;
}
本文由炫意站长翻译,请尊重版权,转载请注明翻译者和原出处
原文CSS Drive CSS3 Button Generator
17
2022-11
09
2022-11
15
2022-09
15
2022-09
14
2022-09
14
2022-09