Radio Buttons Archives - csshint - A designer hub https://csshint.com/tag/radio-buttons/ Sun, 19 Feb 2023 15:52:29 +0000 en-US hourly 1 https://wordpress.org/?v=6.3.4 Switching Radio Button Interaction Animation https://csshint.com/switching-radio-button-interaction-animation/ Fri, 07 Aug 2020 15:59:54 +0000 http://csshint.com/?p=3143 Switching Radio Button : Checkout this really cool switching micro-interaction animation for radio buttons designed by Dronca Raul. HTML [code language=”html”] <div class="card"> <h2>Radio Buttons</h2> <ul> <li> <input type="radio" name="name" id="one" checked /> <label for="one">Option #1</label> <div class="check"></div> </li> <li> <input type="radio" name="name" id="two" /> <label for="two">Option #2</label> <div class="check"></div> </li> </ul> </div> [/code] CSS […]

The post Switching Radio Button Interaction Animation appeared first on csshint - A designer hub.

]]> Switching Radio Button : Checkout this really cool switching micro-interaction animation for radio buttons designed by Dronca Raul.

Switching Radio Button Interaction Animation

Switching Radio Button Interaction Animation


HTML

[code language=”html”]
<div class="card">
<h2>Radio Buttons</h2>

<ul>
<li>
<input type="radio" name="name" id="one" checked />
<label for="one">Option #1</label>

<div class="check"></div>
</li>

<li>
<input type="radio" name="name" id="two" />
<label for="two">Option #2</label>

<div class="check"></div>
</li>
</ul>
</div>
[/code]

CSS

[code language=”css”]
/* Variables
–––––––––––––––––––––––––––––––––––––––––––––––––– */
:root {
–primary-c: #2196F3;
–secondary-c: #B2D7F5;

–white: #FDFBFB;

–text: #082943;
–bg: var(–primary-c);
}

/* Basic Config
–––––––––––––––––––––––––––––––––––––––––––––––––– */
html, body {
height: 100%;
padding: 0;
margin: 0;
}

body {
background-color: var(–bg);
display: flex;
justify-content: center;
align-items: center;
font-family: ‘Raleway’, sans-serif;
color: var(–text);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

ul {
list-style-type: none;
padding-left: 50px;
margin: 0;
}

li {
display: block;
position: relative;
padding: 20px 0px;
}

h2 {
margin: 10px 0;
font-weight: 900;
}

/* Card
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.card {
display: flex;
flex-direction: column;
background: var(–white);
width: 300px;
padding: 20px 25px;
border-radius: 20px;
box-shadow: 0 19px 38px rgba(0, 0, 0, 0.13);
}

/* Radio Button
–––––––––––––––––––––––––––––––––––––––––––––––––– */
input[type=radio] {
position: absolute;
visibility: hidden;
}

label {
cursor: pointer;
font-weight: 400;
}

.check {
width: 30px; height: 30px;
position: absolute;
border-radius: 50%;
transition: transform .6s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

/* Reset */
input#one ~ .check {
transform: translate(-50px, -25px);
background: var(–secondary-c);
}
input#two ~ .check {
transform: translate(-50px, -83px);
background: var(–primary-c);
box-shadow: 0 6px 12px rgba(33, 150, 243, 0.35);
}

/* Radio Input #1 */
input#one:checked ~ .check { transform: translate(-50px, 33px); }

/* Radio Input #2 */
input#two:checked ~ .check { transform: translate(-50px, -25px); }

[/code]

Radio Buttons Interaction ✨

The post Switching Radio Button Interaction Animation appeared first on csshint - A designer hub.

]]> Top 30+ CSS Radio Button Styles https://csshint.com/css-radio-buttons/ Sat, 11 May 2019 19:23:43 +0000 http://csshint.com/?p=828 Collection of HTML and CSS custom radio buttons. 1.Styling radio buttons See the Pen Styling radio buttons by Alexander Repeta (@Luxplanjay) on CodePen. Author Alexander Repeta Made with HTML / CSS(SCSS) demo and code Get Hosting 2.Radio Button using SVG and GSAP See the Pen Liquid Radio Button using SVG and GSAP (GreenSock) by Ryan […]

The post Top 30+ CSS Radio Button Styles appeared first on csshint - A designer hub.

]]> Collection of HTML and CSS custom radio buttons.

1.Styling radio buttons

Author

  • Alexander Repeta

Made with

  • HTML / CSS(SCSS)

demo and code Get Hosting

2.Radio Button using SVG and GSAP

Author

  • Ryan LaBar

Made with

  • HTML / CSS(SCSS) / Js

demo and code Get Hosting

3.Custom Radio Buttons

Author

  • Dronca Raul

Made with

  • HTML / CSS(SCSS)

demo and code Get Hosting

4.Jelly Radio Button

Author

  • Tommaso Poletti

Made with

  • HTML / CSS

demo and code Get Hosting

5.Ripple animation radio and Checkbox

Author

  • WILDER TAYPE

Made with

  • HTML / CSS

demo and code Get Hosting

6.Radio Group using labels

Author

  • skeddles

Made with

  • HTML / CSS(SCSS)

demo and code Get Hosting

7.Animated radio switches

Author

  • Kolja Kutschera

Made with

  • HTML / CSS(Less)

demo and code Get Hosting

8.Radio Selects: Flexbox and Fun

Author

  • Adam Clark

Made with

  • HTML / CSS(SCSS)

demo and code Get Hosting

9.SVG Splat Radio Buttons

Author

  • Chris Gannon

Made with

  • HTML / CSS / JS

demo and code Get Hosting

10.Radio Buttons

Author

  • Saumitra Bose

Made with

  • HTML / CSS(SCSS)

demo and code Get Hosting

11.Input & Radio-button

Author

  • Ophelia Fournier-Laflamme

Made with

  • HTML / CSS(Post css)

demo and code Get Hosting

12.simple radio buttons

Author

  • Pamela Dayne

Made with

  • HTML / CSS

demo and code Get Hosting

13.Animated switch for radio buttons

Author

  • Fredrik Jensen

Made with

  • HTML / CSS(SCSS)

demo and code Get Hosting

14.Material Radio Button

Author

  • CODEARMADA

Made with

  • HTML / CSS(SCSS) / JS

demo and code Get Hosting

15.Material Design – Radio Button CSS

Author

  • Lorenzo D’Ianni

Made with

  • HTML / CSS(SCSS)

demo and code Get Hosting

16.Stylish radio buttons – CSS only

Author

  • Simon Buisson

Made with

  • HTML / CSS(Less)

demo and code Get Hosting

17.CSS radio buttons

Author

  • Angela Velasquez

Made with

  • HTML / CSS

demo and code Get Hosting

18.Radio input

Author

  • Håvard Brynjulfsen

Made with

  • HTML / CSS(SCSS)

demo and code Get Hosting

19.Flat Radio – Yes/No

Author

  • Matthew Blode

Made with

  • HTML(Pug) / CSS(SCSS)

demo and code Get Hosting

20.Radio checked style

Author

  • Volker Otto

Made with

  • HTML / CSS(SCSS)

demo and code Get Hosting

22.Simple Radio Group

Author

  • Igor Amado

Made with

  • HTML(Haml) / CSS(Sass)

demo and code Get Hosting

23.Radio Buttons Interaction

Author

  • Dronca Raul

Made with

  • HTML / CSS

demo and code Get Hosting

24.Mobile Radio Buttons with small animation

Author

  • Benjamin Koehler

Made with

  • HTML / CSS(SCSS)

demo and code Get Hosting

25.Underground radios

Author

  • Mikael Ainalem

Made with

  • HTML / CSS

demo and code Get Hosting

26.checkbox & radio buttons

Author

  • Andreas Storm

Made with

  • HTML / CSS(Stylus)

demo and code Get Hosting

27.Material Design Radio Buttons

Author

  • Andreas Storm

Made with

  • HTML / CSS(Stylus)

demo and code Get Hosting

28.Smile Toggle | HTML + CSS

Author

  • Cameron Fitzwilliam

Made with

  • HTML / CSS(SCSS)

demo and code Get Hosting

29.SVG Radio Selector Buttons

Author

  • Nikki Pantony

Made with

  • HTML / CSS

demo and code Get Hosting

30.Slap Toggle

Author

  • Yariv Fruend

Made with

  • HTML / CSS / JS

demo and code Get Hosting

31.Material Checkboxes and Radio buttons

Author

  • Buddy Reno

Made with

  • HTML / CSS(SCSS)

demo and code Get Hosting

The post Top 30+ CSS Radio Button Styles appeared first on csshint - A designer hub.

]]>