这是一款扩展 bootstrap4 按钮特效。该特效在 bootstrap4 按钮样式的基础上,通过 CSS 样式,设计出一套带闪光按钮特效和扁平线框按钮特效。
在页面中引入 bootstrap.css 和 buttons.css 样式文件。
<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="buttons.css">
按钮的 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>
演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务,详询在线客服!