示例：按钮风格
动作坞 学习资料 SVG图标 按钮代码 代码示例

漂亮的按钮风格示例
感谢CL提供的教程文章
传送门：https://getbootstrap.com/docs/4.0/components/buttons/

按钮徽标

Danger
<span class="badge badge-pill badge-danger">Danger</span>

Warning
<span class="badge badge-warning">Warning</span>

按钮风格1：空心超链接

备份自己外观 备份自己外观 备份自己外观

<a href="quicker://settings:UISettingsPage" target="_blank" class="btn btn-outline-primary"><i class="fal fa-cog"></i>  备份自己外观</a>

按钮风格1：实心超链接

Quicker首页 Quicker首页

<a class="btn btn-primary" href="http://getquicker.net" target="_blank" role="button"><i class="fal fa-globe"></i>  Quicker首页</a>

按钮风格2：

切换首页风格 

<a href="#" class="btn btn-outline-primary btn-lg"><i class="fal fa-magic"></i>  切换首页风格</a>
<button type="button" class="btn btn-outline-primary btn-lg"><i class="fas fa-download"></i>  立刻下载 </button>
<button type="button" class="btn btn-outline-primary btn-lg"><i class="fab fa-microsoft"></i>  动作库 </button>

按钮风格3：



传送门：SVG图标

<button type="button" class="btn btn-primary">
<i class="fas fa-magic" style='color:#FFF'></i>  <a href="#" target="_blank"><font color=#FFF>AAA</font></a>
</button>

按钮风格4：

代码如下：

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

接下来备份一下出现在页面右上角的按钮；
无背景色，可自定义图片，点击它可复制自定义的内容；
效果请点击本页右上角的GIF动态图 ↗

敲重点：记录一下2个重要的小技巧!
一，在图片代码里最后加一个：class='no-lity
比如：<img src='图片网址' width=90 class='no-lity'>
就可以实现点击图片不放大查看原图的效果哦！！

二，将代码中的 sharedAction 换成 data-copy 就可以复制任意内容；
否则复制后出现的提示就是：已复制到剪贴板，请在 Quicker面板的空白按钮上点右键粘贴。

复制任意内容代码如下：

<!--复制按钮开始-->
<div style='position:absolute;right:5px;top:50px;'>
<button id="btnCopyToClipboard" class="btn btn-link" data-copy="网址链接" data-toggle="tooltip" data-placement="bottom" title="将本页网址复制到剪贴板中，方便分享给更多人。">
<img src='图片链接' width=90 class='no-lity'>
</button>
</div>
<!--复制按钮结束-->

复制动作ID代码如下：

<!--复制按钮开始-->
<div style='position:absolute;right:5px;top:50px;'>
<button id="btnCopyToClipboard" class="btn btn-link" sharedAction="动作ID" data-toggle="tooltip" data-placement="bottom" title="将动作网址复制到剪贴板。然后请在面板窗口的空白按钮上右键粘贴分享的动作。">
<img src='图片链接' width=90 class='no-lity'>
</button>
</div>
<!--复制按钮结束-->

名人堂的动作列表按钮：

<!--复制按钮开始-->
<div>
<button id="btnCopyToClipboard" class="btn btn-link" sharedAction="动作ID" data-toggle="tooltip" data-placement="bottom" title="将动作网址复制到剪贴板。然后请在面板窗口的空白按钮上右键粘贴分享的动作。">
<img src='图标地址' width=60 class='my_img no-lity'>
</button>
</div>
<!--复制按钮结束-->

按钮风格5：

<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>

按钮风格6：

<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-secondary btn-lg">Large button</button>

插播一个无法点击的按钮：


<button type="button" class="btn btn-lg btn-primary" disabled>Primary button</button>

按钮风格7：

<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button>

按钮风格8



<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">点击这里查看详情</button>

<div class="collapse" id="collapseExample">
<div style=width:500px class="card card-body">

<img src="https://files.getquicker.net/_sitefiles/_guides/52593d69-c99a-4367-8b98-08d9a65be47e/2021/11/13/200701_202824_01913b5f460892a80120a82160b883.gif">

</div>
</div>
</br>

按钮风格9

导航A 导航B 导航C 导航D 导航E 


<div class="btn-group" role="group" aria-label="Basic example">
<a href="AAA" target="_blank" class="btn btn-outline-info">导航A</a>
<a href="AAA" target="_blank" class="btn btn-outline-info">导航B</a>
<a href="AAA" target="_blank" class="btn btn-outline-info">导航C</a>
<a href="AAA" target="_blank" class="btn btn-outline-info">导航D</a>
<a href="AAA" target="_blank" class="btn btn-outline-info">导航E</a>
</div>