→ 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

492

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

Responsive Tag Chips

Author:
Kemaya m

4 months ago

719

v.5.3
Clean Commerce Cart Design
A sleek shopping cart interface with quantity controls and real-time order summary

Author:
Mason Ashford

5 months ago

2.7k

v.5.3
Call-to-Action Example
Call-to-Action section with bootstrap 5

Author:
Omar Khaled

9 months ago

737

v.5.3
Pagination

Author:
Anonymous

9 months ago

774

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

5 months ago

2.2k

v.5.3
Clean Timeline Changelog
clean and beautiful changelog example

Author:
Alaric Sloane

7 months ago

2k

v.5.3
Delete Confirmation Modal

Author:
Alaric Sloane

7 months ago

8.6k

v.5.3
Pricing cards

Author:
Prajwal Hallale

1 year ago

773

v.5.3
Feature Cards
showcases three key features with a clean, minimal design.

Author:
Alaric Sloane

6 months ago

945

v.5.3
Accordion example with Bootstrap 5.3

Author:
Ankit khedkar

9 months ago

3.7k

v.5.3
Contact card
Company contact card with email, contact number, and social links

Author:
Mateo Rojas

4 months ago

3.5k

v.5.3
User Profile Card with Bootstrap 5

Author:
Anonymous

2 months ago

1k

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent