这是一款扩展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>