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

使用方法

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

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

HTML结构

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

<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结果如下。

<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>
                

在线预览    源码下载