→ 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

1.5k

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

Get In Touch Form Example
Contact us form

Author:
Anonymous

1 year ago

2.3k

v.5.3
Expanding Search Bar - Bootstrap 5
Expand search bar on click

Author:
Andreas Müller

1 year ago

6.1k

v.5.3
Scroll Animation
Scroll Animation

Author:
Rami AlAjo

1 year ago

3.1k

v.4.6
Modern Dashboard Analytics Card
A sleek, modern dashboard component featuring animated metric cards with progress indicators and trend badges. Perfect for displaying key business metrics like revenue, users, and orders with visual progress tracking.

Author:
Alaric Sloane

1 year ago

4.9k

v.5.3
Interactive Star Rating
A dynamic star rating component where users can select their rating by clicking on stars. The rating can range from 1 to 5 stars, offering immediate visual feedback on hover and selection.

Author:
Anonymous

10 months ago

1.6k

v.5.3
Navbar
a responsive navbar with search and sticky ans Header

Author:
almounkez

1 year ago

3.8k

v.5.3
marquee track

Author:
Juan Antonio González Hernández

2 weeks ago

142

v.4.6
Contact US form

Author:
Anonymous

1 year ago

7.9k

v.4.6
Beautiful Stats Section
App stats section with icons. with hover effect

Author:
Riz Mohammad

1 year ago

2.1k

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

Author:
StarCode Kh

1 year ago

2.4k

v.5.3
Interactive Star Rating
A dynamic star rating component where users can select their rating by clicking on stars. The rating can range from 1 to 5 stars, offering immediate visual feedback on hover and selection.

Author:
Mason Ashford

1 year ago

14k

v.5.3
progress-steps
progress-steps

Author:
Rami AlAjo

1 year ago

2k

v.4.6

Didn't find component you were looking for?

Search from 300+ componenent