→ Arturo
→ Animated Radio Buttons

Animated Radio Buttons

This bootstrap css example is contributed by Arturo, on 22-Dec-2024. Component is made with bootstrap css v.5.3. It is responsive.

Tags: Radio

Author Arturo

675

v.5.3

Fork Fullscreen

<div class="container py-5">
    <h2 class="mb-4">Animated Radio Buttons</h2>

<div class="radio-container">
        <h5 class="mb-3">Pulse Effect</h5>
        <label class="custom-radio pulse-radio d-block mb-2">
            <input type="radio" name="pulse" checked>
            <span class="radio-check"></span>
            Option 1
        </label>
        <label class="custom-radio pulse-radio d-block">
            <input type="radio" name="pulse">
            <span class="radio-check"></span>
            Option 2
        </label>
    </div>

<div class="radio-container">
        <h5 class="mb-3">Slide Effect</h5>
        <label class="custom-radio slide-radio d-block mb-2">
            <input type="radio" name="slide" checked>
            <span class="radio-check"></span>
            Option 1
        </label>
        <label class="custom-radio slide-radio d-block">
            <input type="radio" name="slide">
            <span class="radio-check"></span>
            Option 2
        </label>
    </div>

<div class="radio-container">
        <h5 class="mb-3">Scale Effect</h5>
        <label class="custom-radio scale-radio d-block mb-2">
            <input type="radio" name="scale" checked>
            <span class="radio-check"></span>
            Option 1
        </label>
        <label class="custom-radio scale-radio d-block">
            <input type="radio" name="scale">
            <span class="radio-check"></span>
            Option 2
        </label>
    </div>

<div class="radio-container">
        <h5 class="mb-3">Wave Effect</h5>
        <label class="custom-radio wave-radio d-block mb-2">
            <input type="radio" name="wave" checked>
            <span class="radio-check"></span>
            Option 1
        </label>
        <label class="custom-radio wave-radio d-block">
            <input type="radio" name="wave">
            <span class="radio-check"></span>
            Option 2
        </label>
    </div>
</div>

More Examples

Default progress bar designs by boostrap css

Author:
Omar Khaled

9 months ago

1.6k

v.5.3
Activity Logs Dashboard
activity logs component with timeline visualization, export functionality, and detailed event tracking in Bootstrap 5.3.

Author:
Isaac Winslow

7 months ago

2.8k

v.5.3
Mobile App Landing Page with Bootstrap 5

Author:
Ankit khedkar

8 months ago

1.5k

v.5.3
Service Cards with Hover Effects
service showcase component featuring neuromorphic design cards with smooth hover effects, gradient accents, and responsive layout.

Author:
Alaric Sloane

7 months ago

1.8k

v.5.3
FAQ accordion
The accordion component is a vertically stacked set of items

Author:
Prajwal Hallale

1 year ago

3.1k

v.5.3
Elegant Product Showcase Component

Author:
Anonymous

7 months ago

1.1k

v.5.3
Stats cards using Bootstrap 5
BS5 stat cards

Author:
Anonymous

11 months ago

7.2k

v.5.3
Modern Bootstrap Search Bar

Author:
Anonymous

6 months ago

3.3k

v.5.3
Bootstrap Tab Example
Bootstrap Tab Example Basic Part 1

Author:
StarCode Kh

4 months ago

880

v.5.3
Beautiful Pricing Cards

Author:
Anonymous

8 months ago

978

v.5.3
for me
A modern and visually appealing card component with a gradient background and hover effect.

Author:
Jimmy Mercury

5 months ago

920

v.5.3
404 page template
with an animated illustration and a button to redirect to the homepage

Author:
Anonymous

2 weeks ago

157

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent