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

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

CTA section
Simple CTA section

Author:
Prajwal Hallale

1 year ago

1.5k

v.4.6
Contact Us form

Author:
Anonymous

1 year ago

7.6k

v.4.6
Music player with bootstrap 5
Animated music player design

Author:
Mateo Rojas

9 months ago

2.1k

v.5.3
Bootstrap 5.3 Testimonial Card Component

Author:
Levi Treadwell

9 months ago

915

v.5.3
Simple stats section
Minimalist stats example made with bootstrap 5

Author:
Tane Mahuta

1 year ago

1.1k

v.5.3
Button group
solid button group

Author:
Mishti

1 year ago

1k

v.5.3
Collapsible Sidebar

Author:
Alaric Sloane

10 months ago

38.2k

v.5.3
Error Page, you can use HTML, CSS, and Bootstrap.
HTML: Error Title: A large, bold number (e.g., 404) to indicate the error type. Error Message: A brief message explaining the error. Button: A button to navigate back to the home page. Adjust the href attribute to point to your actual home page URL. CSS: Background Gradient: Applied to the body to give a stylish look. Error Container: Centered on the page with a semi-transparent background for contrast. Button Styling: Custom colors for the button, including hover effects.

Author:
zobaidul kaziex

1 year ago

1.7k

v.4.6
Bento Grid Layout with Images

Author:
Juan Martinez

1 year ago

3.2k

v.5.3
contact us custom

Author:
java stories story

1 month ago

862

v.5.3
B- Bootstrap homepage with background color, hover effects, animations, and shadows added to enhance the design
B-Features Added: Background Gradient: A smooth gradient background using linear-gradient. Card Shadow and Hover Effect: The card now lifts up with a shadow (box-shadow) and smooth transition (transform) on hover. Button Customization: A custom round button with hover color change. Animation: The card content animates with a "fade-in-up" effect using keyframe animation.

Author:
Bhavik Shah

5 months ago

2k

v.4.6
Collapsible Sidebar

Author:
Anonymous

6 months ago

5.2k

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent