Bootstrap4按钮样式扩展库

当前位置:主页 > CSS3库 > UI界面设计 > Bootstrap4按钮样式扩展库
Bootstrap4按钮样式扩展库
分享:

    插件介绍

    这是一款简单的Bootstrap4按钮样式扩展库。该Bootstrap4按钮样式扩展库通过定义CSS,来为bootstrap 4原生按钮添加3D按钮,带图标的按钮,圆角按钮,以及为按钮添加更多的可用颜色,非常实用。

    浏览器兼容性

    浏览器兼容性
    时间:2018-04-05
    阅读:
简要教程

这是一款简单的Bootstrap按钮样式扩展库。该Bootstrap按钮样式扩展库通过定义CSS,来为bootstrap 4原生按钮添加3D按钮,带图标的按钮,圆角按钮,以及为按钮添加更多的可用颜色,非常实用。

使用方法

在页面中引入bootstrap 4 样式文件,以及botton.css文件。

<link rel="stylesheet" type="text/css" href="css/bootstrap-4.0.0.min.css">
<link rel="stylesheet" type="text/css" href="css/button.css">                  
                
HTML结构

实用时,只需要在原生的bootstrap 4按钮标签上添加需要的class类即可,例如3D按钮的HTML结构如下:

<button type="button" class="btn btn-primary btn-3d">btn-3d</button>            
                

3D按钮:

<button type="button" class="btn btn-primary btn-3d">btn-3d</button>                        
                

bootstrap4 3d按钮

带图标遮罩层的按钮:

<button type="button" class="btn btn-primary btn-lg btn-icon-overlay">
  <i class="fa fa-user"></i> btn-icon-overlay
</button>                      
                

bootstrap4 图标遮罩层的按钮

圆角按钮:

<button type="button" class="btn btn-success btn-circle">btn-circle</button>                    
                

bootstrap4 圆角按钮

带填充动画的按钮:

<button type="button" class="btn btn-primary btn-fill fill-top">fill-top</button>

btn-fill fill-top
btn-fill fill-right
btn-fill fill-bottom
btn-fill fill-left             
                

bootstrap4 带填充动画的按钮

更多按钮颜色:

<button type="button" class="btn btn-green">btn-green</button>

btn-green
btn-blue
btn-purple
btn-orange
btn-dirty-green
btn-aqua
btn-grey                 
                

bootstrap4 更多按钮颜色

社交网站颜色按钮:

<button type="button" class="btn btn-facebook">btn-facebook</button>

btn-facebook
btn-twitter
btn-pinterest
btn-youtube
btn-linkedin
btn-google-plus           
                

bootstrap4 社交网站颜色按钮

该Bootstrap按钮样式扩展库的github地址为:https://github.com/mohammad-hammal/bootsrap4-buttons-extended

网友评论