→ 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

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

Simple Login form

Author:
Prajwal Hallale

2 years ago

9.9k

v.5.3
Training and section Section

Author:
istiakahmedchowdhury10

1 month ago

105

v.4.6
Team Section with Bootstrap 5

Author:
Arturo

1 year ago

4.1k

v.5.3
Personl Details

Author:
Gana JNsksk

3 months ago

328

v.4.6
Personal Biography Section

Author:
Shahriar Noyon

3 months ago

514

v.4.6
form

Author:
Happy Khatun

3 months ago

368

v.4.6
Personal Biography section
destra immagine e sinistra testo

Author:
Anonymous

2 months ago

415

v.5.3
Mobile App Landing Fage template
Free mobile app landing page template with Bootstrap

Author:
Asmath

1 year ago

1.8k

v.5.3
Footer
Footer de Bootstrap con enlaces rápidos, contacto y redes sociales, usando íconos para mejor navegación. Diseño limpio y responsivo. 🚀

Author:
Anonymous

1 year ago

6.7k

v.4.6
Search section

Author:
Ankit khedkar

1 year ago

3.6k

v.5.3
Skills Information section

Author:
Ad Apon7

3 months ago

720

v.5.3
Section Title

Author:
istiakahmedchowdhury10

1 month ago

101

v.4.6

Didn't find component you were looking for?

Search from 300+ componenent