Basic
Use
.pulsewith for any element to provide a user's attentation.
<a href="#" class="btn btn-icon btn-light pulse">
<span class="svg-icon svg-icon-2><svg>...</svg></span>
<span class="pulse-ring"></span>
</a>
Colors
Use
.pulse-{color}class to set a pulse's color:
<a href="#" class="btn btn-icon btn-light pulse pulse-white">
<span class="svg-icon svg-icon-1"><svg>...</svg></span>
<span class="pulse-ring"></span>
</a>
<a href="#" class="btn btn-icon btn-light pulse pulse-primary">
<span class="svg-icon svg-icon-1"><svg>...</svg></span>
<span class="pulse-ring"></span>
</a>
<a href="#" class="btn btn-icon btn-light pulse pulse-light">
<span class="svg-icon svg-icon-1"><svg>...</svg></span>
<span class="pulse-ring"></span>
</a>
<a href="#" class="btn btn-icon btn-light pulse pulse-secondary">
<span class="svg-icon svg-icon-1"><svg>...</svg></span>
<span class="pulse-ring"></span>
</a>
<a href="#" class="btn btn-icon btn-light pulse pulse-success">
<span class="svg-icon svg-icon-1"><svg>...</svg></span>
<span class="pulse-ring"></span>
</a>
<a href="#" class="btn btn-icon btn-light pulse pulse-info">
<span class="svg-icon svg-icon-1"><svg>...</svg></span>
<span class="pulse-ring"></span>
</a>
<a href="#" class="btn btn-icon btn-light pulse pulse-warning">
<span class="svg-icon svg-icon-1"><svg>...</svg></span>
<span class="pulse-ring"></span>
</a>
<a href="#" class="btn btn-icon btn-light pulse pulse-danger">
<span class="svg-icon svg-icon-1"><svg>...</svg></span>
<span class="pulse-ring"></span>
</a>
<a href="#" class="btn btn-icon btn-light pulse pulse-dark">
<span class="svg-icon svg-icon-1"><svg>...</svg></span>
<span class="pulse-ring"></span>
</a>
Border Width
Use the standard
.border-{width}class with
.pulse-ringto set a pulse ring's border width.Where
widthis one of:
-
0- for classes that set border width to 0px -
1- for classes that set border width to 1px -
2- for classes that set border width to 2px -
3- for classes that set border width to 3px -
4- for classes that set border width to 4px -
5- for classes that set border width to 5px
<a href="#" class="btn btn-icon btn-light pulse pulse-primary">
<span class="svg-icon svg-icon-1"><svg>...</svg></span>
<span class="pulse-ring border-0"></span>
</a>
<a href="#" class="btn btn-icon btn-light pulse pulse-primary">
<span class="svg-icon svg-icon-1"><svg>...</svg></span>
<span class="pulse-ring border-1"></span>
</a>
<a href="#" class="btn btn-icon btn-light pulse pulse-primary">
<span class="svg-icon svg-icon-1"><svg>...</svg></span>
<span class="pulse-ring border-2"></span>
</a>
<a href="#" class="btn btn-icon btn-light pulse pulse-primary">
<span class="svg-icon svg-icon-1"><svg>...</svg></span>
<span class="pulse-ring border-3"></span>
</a>
<a href="#" class="btn btn-icon btn-light pulse pulse-primary">
<span class="svg-icon svg-icon-1"><svg>...</svg></span>
<span class="pulse-ring border-4"></span>
</a>
<a href="#" class="btn btn-icon btn-light pulse pulse-primary">
<span class="svg-icon svg-icon-1"><svg>...</svg></span>
<span class="pulse-ring border-5"></span>
</a>
2022©
Keenthemes
