web299.com
全部
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
首页
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
当前位置:
首页
>
网页特效
>
按钮特效
Bootstrap带图标的按钮样式
分类:
按钮特效
日期:
2024-05-14
点击(2)
评论(0)
演 示
免费下载
简介
在页面中引入bootstrap.min.css和字体图标文件font-awesome.min.css。 ```html
``` ##### HTML结构 制作一个按钮的基本HTML结构如下: ```html
button
``` 其中,red class用于控制按钮的颜色。span元素用于制作按钮前的小图标。 ##### CSS样式 用于美化按钮的CSS样式如下: ```html .btn{ color: #fff; text-transform: uppercase; border-radius: 0; padding-left: 60px; position: relative; transform: translateZ(0px); transition: all 0.5s ease 0s; } .btn:after{ content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: #fff; z-index: -1; transform: scaleX(0); transform-origin: 100% 50% 0; transition: all 0.5s ease-out 0s; } .btn:hover:after{ transform: scaleX(1); transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); } .btn span{ width: 40px; height: 100%; line-height: 40px; background: #fff; position: absolute; top: 0; left: 0; transition: all 0.3s linear 0s; } .btn span:after{ content: ""; display: block; width: 10px; height: 10px; background: #fff; margin: auto 0; position: absolute; top: 0; right: -6px; bottom: 0; transform: rotate(45deg); transition: all 0.3s linear 0s; } .btn.btn-sm{ padding-left: 40px; } .btn.btn-sm span{ width: 27px; line-height: 27px; } .btn.btn-sm span:after{ width: 8px; height: 8px; right: -5px; } .btn.btn-xs{ padding-left: 30px; } .btn.btn-xs span{ width: 20px; line-height: 20px; } .btn.btn-xs span:after{ width: 7px; height: 7px; right: -4px; } .btn.red{ border: 1px solid #fe6d6d; background: #fe6d6d; } .btn.red:hover, .btn.red span{ color: #fe6d6d; } .btn.red:hover span, .btn.red:hover span:after{ background: #fe6d6d; } .btn.blue{ border: 1px solid #3bb4e5; background: #3bb4e5; } .btn.blue:hover, .btn.blue span{ color: #3bb4e5; } .btn.blue:hover span, .btn.blue:hover span:after{ background: #3bb4e5; } .btn.orange{ border: 1px solid #ee955b; background: #ee955b; } .btn.orange:hover, .btn.orange span{ color: #ee955b; } .btn.orange:hover span, .btn.orange:hover span:after{ background: #ee955b; } .btn.green{ border: 1px solid #79d799; background: #79d799; } .btn.green:hover, .btn.green span{ color: #79d799; } .btn.green:hover span, .btn.green:hover span:after{ background: #79d799; } .btn:hover span{ color: #fff; } @media only screen and (max-width: 767px){ .btn{ margin-bottom: 20px; } } ```
相关推荐
html5浪漫粒子表白文字特效
SlidesJS幻灯片特效
html5瀑布流相册特效
css3 svg实现的情人节表白鲜花动画特效
t-scroll.js基于ES6的DOM元素,过渡动画库插件
纯js写省市区三级联动效果
广告
广告