Hover
Micro-interactions for buttons, cards, and links. CSS hover classes are Lightweight. Magnetic cursor and cursor spotlight require Premium JS.
Micro-interactions for buttons, cards, and links. CSS-only effects are in css/animations.css — no JS. Magnetic cursor and cursor spotlight effects require the Premium tier.
CSS hover classes Lightweight
Apply to any interactive element. All transitions use BDS duration and easing tokens.
<!-- Button lifts on hover, presses down on click -->
<a href="/book" class="hover-lift click-press">Book Now</a>
<!-- Card scales slightly on hover -->
<div class="card hover-scale">Portfolio item</div>
<!-- Link gets an animated underline -->
<a href="/about" class="hover-underline">About us</a>
<!-- Image dims on hover (for overlay text) -->
<div class="hover-dim">
<img src="photo.jpg" alt="...">
</div>| Class | Effect | Typical use |
|---|---|---|
.hover-lift | translateY(-4px) + subtle shadow increase | Buttons, CTAs |
.hover-scale | scale(1.03) | Cards, image tiles |
.hover-glow | Box shadow glow in brand color | Accent buttons, badges |
.hover-dim | opacity: 0.75 | Image overlays, nav items |
.hover-underline | Animated underline grows from left | Text links |
.click-press | scale(0.97) on :active | Pair with .hover-lift on buttons |
Magnetic cursor buttons Premium
Buttons attract the cursor within a defined radius, creating a tactile feel. Requires premium-scroll.js.
<!-- Default strength (0.4) -->
<a href="/book" class="magnetic" data-premium-magnetic>Book Now</a>
<!-- Stronger pull -->
<button class="magnetic" data-premium-magnetic data-magnetic-strength="0.7">
Get Started
</button>
<!-- Initialize in your script -->
<script>BrikPremium.init();</script>Magnetic effects are best on isolated primary CTAs — do not apply to every button on the page. The effect draws attention to the element; overuse neutralizes it.
Cursor spotlight Premium
A section that reveals a soft radial gradient following the cursor — effective on dark hero and feature sections. Add the .cursor-spotlight class (styles in css/premium-effects.css) plus the data-premium-spotlight attribute so premium-scroll.js wires up the pointer tracking, then call BrikPremium.init().
<section class="cursor-spotlight" data-premium-spotlight>
Dark content — spotlight follows the pointer
</section>
<script>BrikPremium.init();</script>Tune the gradient color with the --spotlight-color custom property. The effect is skipped automatically on touch devices.