→ 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.6k

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

Beautiful Spinners made with Bootstrap 5
collection of loading spinners

Author:
Anonymous

1 year ago

2.2k

v.5.3
Simple pricing plan cards
3 pricing plan cards

Author:
Anonymous

2 years ago

1.6k

v.4.6
Auto-expanding Textarea

Author:
Anonymous

1 year ago

3.4k

v.5.3
Botones

Author:
Gustavo Bertolini

4 months ago

268

v.4.6
404 page template

Author:
Valeria González

1 year ago

27.5k

v.5.3
Bento Grid with Bootstrap 5

Author:
Juan Martinez

1 year ago

6.6k

v.5.3
Bootstrap 5 chat template

Author:
Andreas Müller

1 year ago

3.3k

v.5.3
Default progress bar designs by boostrap css

Author:
Omar Khaled

1 year ago

2.4k

v.5.3
Marquee Animation
On hover stop effect

Author:
Anonymous

1 year ago

13.4k

v.5.3
User Settings Form
form with following sections - Personal Information - Profile Picture - Email Preferences - Account Settings - Change Password - Privacy Settings

Author:
Juniper

1 year ago

5.2k

v.5.3
HTML and CSS for Hero Section
Explanation: HTML: Hero Section: Uses a background image with a gradient overlay. Hero Content: Centered with a title, subtitle, and a call-to-action button. CSS: Hero Section Styling: Full viewport height with a gradient overlay for better text readability and a background image. Hero Content Styling: Centered with responsive padding and font sizes. Button Styling: Custom button colors and hover effects. Background Image: Placeholder URL: Replace 'https://via.placeholder.com/1920x1080' with the actual URL of your hero image

Author:
zobaidul kaziex

1 year ago

3.2k

v.4.6
Responsive Dashboard Statistics Cards

Author:
Ankit khedkar

1 year ago

7.8k

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent