扩展bootstrap4按钮特效

扩展bootstrap4按钮特效

这是一款扩展bootstrap4按钮特效。该特效在bootstrap4按钮样式的基础上,通过CSS样式,设计出一套带闪光按钮特效和扁平线框按钮特效。

使用方法
在页面中引入bootstrap.css和buttons.css样式文件。

1
2
<link rel="stylesheet" href="bootstrap.css">              
<link rel="stylesheet" href="buttons.css">

HTML结构
按钮的HTML结构和bootstrap中的按钮结构相同。

1
2
3
4
5
6
7
8
9
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>

线框按钮的HTML结果如下。

1
2
3
4
5
6
7
8
9
<button type="button" class="btn btn-outline-primary btn-lg">Primary</button>
<button type="button" class="btn btn-outline-secondary btn-lg">Secondary</button>
<button type="button" class="btn btn-outline-success btn-lg">Success</button>
<button type="button" class="btn btn-outline-danger btn-lg">Danger</button>
<button type="button" class="btn btn-outline-warning btn-lg">Warning</button>
<button type="button" class="btn btn-outline-info btn-lg">Info</button>
<button type="button" class="btn btn-outline-light btn-lg">Light</button>
<button type="button" class="btn btn-outline-dark btn-lg">Dark</button>
<button type="button" class="btn btn-outline-link btn-lg">Link</button>
当前内容只有登录了才能查看,如果您已经注册,请登录
0

发表评论