Cool Button 是一个按钮样式库，它最大的特点是无需输入类名即可快速预定义按钮样式，若需要其他样式，仅需少量类名即可实现。
<button class="c-btn simple">Simple</button>
<button class="c-btn square">Square</button>
<button class="c-btn hover">Hover</button>
<button class="c-btn less-padding">Less Padding</button>
<button class="c-btn no-padding">No Padding</button>
<button class="c-btn flat">Flat</button>
<button class="c-btn radius">Radius</button>
<button class="c-btn circle">Circle</button>
<button class="c-btn circle icon"><i class="bi bi-bootstrap"></i></button>
<button class="c-btn sm">Small Size</button>
<button class="c-btn md">Middle Size</button>
<button class="c-btn lg">Large Size</button>
<button class="c-btn block">Block Size</button>
<button class="c-btn full-block">Full Block Size</button>
<button class="c-btn md radius red">Red</button>
<button class="c-btn md radius orange">Orange</button>
<button class="c-btn md radius tangerine">Tangerine</button>
<button class="c-btn md radius green">Green</button>
<button class="c-btn md radius emerald">Emerald</button>
<button class="c-btn md radius mint">Mint</button>
<button class="c-btn md radius blue">Blue</button>
<button class="c-btn md radius ocean-blue">Ocean-blue</button>
<button class="c-btn md radius sea-blue">Sea-blue</button>
<button class="c-btn md radius deep-blue">Deep-blue</button>
<button class="c-btn md radius yellow">Yellow</button>
<button class="c-btn md radius gold">Gold</button>
<button class="c-btn md radius purple">Purple</button>
<button class="c-btn md radius lilac">Lilac</button>
<button class="c-btn md radius brown">Brown</button>
<button class="c-btn md radius pink">Pink</button>
<button class="c-btn md radius deep-blue-10">Deep-blue-10</button>
悬停后才展示完整颜色
<button class="c-btn hover-red">Red Hover</button>
<button class="c-btn hover-orange">Orange Hover</button>
<button class="c-btn hover-tangerine">Tangerine Hover</button>
<button class="c-btn hover-green">Green Hover</button>
<button class="c-btn hover-emerald">Emerald Hover</button>
<button class="c-btn hover-mint">Mint Hover</button>
<button class="c-btn hover-blue">Blue Hover</button>
<button class="c-btn hover-ocean-blue">Ocean-blue Hover</button>
<button class="c-btn hover-sea-blue">Sea-blue Hover</button>
<button class="c-btn hover-deep-blue">Deep-blue Hover</button>
<button class="c-btn hover-yellow">Yellow Hover</button>
<button class="c-btn hover-gold">Gold Hover</button>
<button class="c-btn hover-purple">Purple Hover</button>
<button class="c-btn hover-lilac">Lilac Hover</button>
<button class="c-btn hover-brown">Brown Hover</button>
<button class="c-btn hover-pink">Pink Hover</button>
<button class="c-btn hover" hover="red">自定义颜色</button>
<button class="c-btn hover-tran-red">Red Hover</button>
<button class="c-btn hover-tran-orange">Orange Hover</button>
<button class="c-btn hover-tran-tangerine">Tangerine Hover</button>
<button class="c-btn hover-tran-green">Green Hover</button>
<button class="c-btn hover-tran-emerald">Emerald Hover</button>
<button class="c-btn hover-tran-mint">Mint Hover</button>
<button class="c-btn hover-tran-blue">Blue Hover</button>
<button class="c-btn hover-tran-ocean-blue">Ocean-blue Hover</button>
<button class="c-btn hover-tran-sea-blue">Sea-blue Hover</button>
<button class="c-btn hover-tran-deep-blue">Deep-blue Hover</button>
<button class="c-btn hover-tran-yellow">Yellow Hover</button>
<button class="c-btn hover-tran-gold">Gold Hover</button>
<button class="c-btn hover-tran-purple">Purple Hover</button>
<button class="c-btn hover-tran-lilac">Lilac Hover</button>
<button class="c-btn hover-tran-brown">Brown Hover</button>
<button class="c-btn hover-tran-pink">Pink Hover</button>
<button class="c-btn hover-tran-red">自定义颜色</button>
<button class="c-btn hover-tran-red text-white">Red Hover</button>
<button class="c-btn hover-tran-orange text-white">Orange Hover</button>
<button class="c-btn hover-tran-tangerine text-white">Tangerine Hover</button>
<button class="c-btn hover-tran-green text-white">Green Hover</button>
<button class="c-btn hover-tran-emerald text-white">Emerald Hover</button>
<button class="c-btn hover-tran-mint text-white">Mint Hover</button>
<button class="c-btn hover-tran-blue text-white">Blue Hover</button>
<button class="c-btn hover-tran-ocean-blue text-white">Ocean-blue Hover</button>
<button class="c-btn hover-tran-sea-blue text-white">Sea-blue Hover</button>
<button class="c-btn hover-tran-deep-blue text-white">Deep-blue Hover</button>
<button class="c-btn hover-tran-yellow text-white">Yellow Hover</button>
<button class="c-btn hover-tran-gold text-white">Gold Hover</button>
<button class="c-btn hover-tran-purple text-white">Purple Hover</button>
<button class="c-btn hover-tran-lilac text-white">Lilac Hover</button>
<button class="c-btn hover-tran-brown text-white">Brown Hover</button>
<button class="c-btn hover-tran-pink text-white">Pink Hover</button>
<button class="c-btn hover-tran-red text-white">自定义颜色</button>
悬停后展示边框颜色
<button class="c-btn hover-border-red">Red Hover</button>
<button class="c-btn hover-border-orange">Orange Hover</button>
<button class="c-btn hover-border-tangerine">Tangerine Hover</button>
<button class="c-btn hover-border-green">Green Hover</button>
<button class="c-btn hover-border-emerald">Emerald Hover</button>
<button class="c-btn hover-border-mint">Mint Hover</button>
<button class="c-btn hover-border-blue">Blue Hover</button>
<button class="c-btn hover-border-ocean-blue">Ocean-blue Hover</button>
<button class="c-btn hover-border-sea-blue">Sea-blue Hover</button>
<button class="c-btn hover-border-deep-blue">Deep-blue Hover</button>
<button class="c-btn hover-border-yellow">Yellow Hover</button>
<button class="c-btn hover-border-gold">Gold Hover</button>
<button class="c-btn hover-border-purple">Purple Hover</button>
<button class="c-btn hover-border-lilac">Lilac Hover</button>
<button class="c-btn hover-border-brown">Brown Hover</button>
<button class="c-btn hover-border-pink">Pink Hover</button>
<button class="c-btn hover-border-red">自定义颜色</button>
<button class="c-btn hover-border-tran-red">Red Hover</button>
<button class="c-btn hover-border-tran-orange">Orange Hover</button>
<button class="c-btn hover-border-tran-tangerine">Tangerine Hover</button>
<button class="c-btn hover-border-tran-green">Green Hover</button>
<button class="c-btn hover-border-tran-emerald">Emerald Hover</button>
<button class="c-btn hover-border-tran-mint">Mint Hover</button>
<button class="c-btn hover-border-tran-blue">Blue Hover</button>
<button class="c-btn hover-border-tran-ocean-blue">Ocean-blue Hover</button>
<button class="c-btn hover-border-tran-sea-blue">Sea-blue Hover</button>
<button class="c-btn hover-border-tran-deep-blue">Deep-blue Hover</button>
<button class="c-btn hover-border-tran-yellow">Yellow Hover</button>
<button class="c-btn hover-border-tran-gold">Gold Hover</button>
<button class="c-btn hover-border-tran-purple">Purple Hover</button>
<button class="c-btn hover-border-tran-lilac">Lilac Hover</button>
<button class="c-btn hover-border-tran-brown">Brown Hover</button>
<button class="c-btn hover-border-tran-pink">Pink Hover</button>
<button class="c-btn hover-border-tran-red">自定义颜色</button>
移动鼠标到按钮上试试
<button class="c-btn float-up deep-blue">Float Up</button>
<button class="c-btn float-down deep-blue">Float Down</button>
让按钮就像真的按钮一样。
<button class="c-btn active deep-blue">Active</button>
<button class="c-btn mouse-hover deep-blue">Mouse Hover</button>
<button class="c-btn active-with-hover deep-blue">Active And Hover</button>
按钮的周围有一圈模糊的阴影。
<button class="c-btn shadow-red">Red</button>
<button class="c-btn shadow-orange">Orange</button>
<button class="c-btn shadow-tangerine">Tangerine</button>
<button class="c-btn shadow-green">Green</button>
<button class="c-btn shadow-emerald">Emerald</button>
<button class="c-btn shadow-mint">Mint</button>
<button class="c-btn shadow-blue">Blue</button>
<button class="c-btn shadow-ocean-blue">Ocean-blue</button>
<button class="c-btn shadow-sea-blue">Sea-blue</button>
<button class="c-btn shadow-deep-blue">Deep-blue</button>
<button class="c-btn shadow-yellow">Yellow</button>
<button class="c-btn shadow-gold">Gold</button>
<button class="c-btn shadow-purple">Purple</button>
<button class="c-btn shadow-lilac">Lilac</button>
<button class="c-btn shadow-brown">Brown</button>
<button class="c-btn shadow-pink">Pink</button>
优雅的玻璃按钮。
<button class="c-btn glass">Glass Button</button>
<button class="c-btn glass blur-20">Blur 20 Button</button>
<button class="c-btn glass-pink">With Color</button>
<button class="c-btn hover-glass">Hover Glass Button</button>
<button class="c-btn hover-glass-deep-blue">Hover With Color</button>
<button class="c-btn sm-fat deep-blue">sm-flat</button>
<button class="c-btn tag deep-blue">Tag</button>
<button class="c-btn deep-blue btn-bold">Bold Font</button>
一个圆角且中号的祖母绿按钮
<button class="c-btn radius sm emerald">关注</button>