← All elements
<div class="btn-wrapper">
<button class="btn">
<span class="btn-txt">View Offers</span>
<div class="dot pulse"></div>
</button>
<span class="disclaimer-txt">*Terms & conditions apply</span>
</div>About this button
A soft inset button with a pulsing green dot beside the label. Hover lifts it with a green glow, pressing pushes it back, and a small terms line sits underneath.
How it works
A wrapper draws the soft inset well, and the button sits on top with a drop-shadow filter that changes with state. Hover and focus-visible lift it and add a green glow, pressing pushes it back along the Z axis, and a small dot beside the label pulses with two keyframes. Custom properties hold the size, hue and timing.
Ways to customise it
- Change --hue to recolour the glow and dot.
- Edit --width and --height to resize.
- Change --animation-duration for a faster pulse.
Good to know
It is a real button with a dashed outline on keyboard focus. Do not rely on the pulsing dot as the only signal for important offers.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.