CSS和CSS3按钮选择器对比
CSS3按钮选择器,通过CSS3新特性把普通的html链接设计成视觉上平滑的按钮m包括梯度背景、圆角、下拉阴影,以及转换等效果。支持CSS 3动画,可以把按钮逐渐地从默认状态变为悬停状态,你可以在不使用如上图那样的图片的情况下得到一个漂亮的按钮。
- 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和CSS3按钮选择器对比】相关文章
本文来源:https://www.51html5.com/a820.html
上一篇:兼容所有浏览器的CSS3圆角
下一篇:Css3弹性盒模型
﹝CSS和CSS3按钮选择器对比﹞相关内容
- CSS3每日一练之选择器-状态伪类选择器[一]
- CSS3每日一练之选择器-结构性伪类选择器[六]
- CSS3每日一练之选择器-结构性伪类选择器[五]
- CSS3每日一练之选择器-结构性伪类选择器[四]
- 推荐12个漂亮的CSS3按钮实现方案
- 8款超酷而实用的CSS3按钮动画
- 20种炫酷CSS3按钮样式和鼠标滑过特效
- 基于js和canvas的开源HTML5应用开发框架
- 在IE中使用高级CSS3选择器
- CSS3每日一练之选择器-插入文字