→ 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

152

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

Timer with bootstrap

Author:
Anonymous

1 month ago

243

v.5.3
Beautiful Product card with bootstrap css

Author:
Levi Treadwell

1 month ago

146

v.5.3
Interactive Quiz Application
1. Dynamic Question Loading: Questions are loaded one at a time from a predefined set. 2. Timer: Each question has a 30-second time limit. Interactive Options: Users can select their answer, with visual feedback for correct and incorrect choices. 3. Progress Bar: Shows the user's progress through the quiz. 4. Results Summary: Displays the final score with a congratulatory or encouraging message. 5. Responsive Design: The quiz adapts to different screen sizes.

Author:
Ross Wille

4 months ago

1.3k

v.5.3
Interactive Data Visualization Dashboard

Author:
Ross Wille

4 months ago

407

v.5.3
Team Section with Bootstrap 5

Author:
Arturo

1 month ago

219

v.5.3
Beutifull Comment Section Bootstrap - 5
The comment section for your website

Author:
Asmath

1 month ago

1.1k

v.5.3
Shopping cart design using Bootstrap 5
With order summary and promo code form

Author:
Kemaya m

6 months ago

3.1k

v.5.3
bootstrap 5 confirm modal

Author:
Anonymous

1 month ago

1.3k

v.5.3
Minimal Changelog Page Template design

Author:
Asmath

1 month ago

953

v.5.3
Elegant Bootstrap Footer
with social media icons, newsletter forms, and other important links

Author:
Mateo Rojas

1 month ago

221

v.5.3
Card grid
card grid for blog articles etc. it also has author's details

Author:
Anonymous

6 months ago

394

v.4.6
Simple Footer

Author:
Anonymous

10 months ago

383

v.4.6

Didn't find component you were looking for?

Search from 300+ componenent