Google Dots Radio Buttons

Developer
Victor Freire
Size
2,834 Kb
Views
24,288
  1. Google Dots Radio Buttons Previews
  2. Google Dots Radio Buttons HTML Codes
  3. Google Dots Radio Buttons CSS Codes
  4. Google Dots Radio Buttons JS Codes

How do I make an google dots radio buttons?

4 different ways to easily customize radio buttons. Inspiration: design.google.com/articles/evolving-the-google-identity/. What is a google dots radio buttons? How do you make a google dots radio buttons? This script and codes were developed by Victor Freire on 07 September 2022, Wednesday.

Google Dots Radio Buttons Previews
IQ Test

Google Dots Radio Buttons - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Google Dots Radio Buttons</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <main> <div class="container"> <input type="radio" class="radio" id="radio-1" name="group"/> <label for="radio-1"></label> <input type="radio" class="radio" id="radio-2" name="group"/> <label for="radio-2"></label> <input type="radio" class="radio" id="radio-3" name="group"/> <label for="radio-3"></label> <input type="radio" class="radio" id="radio-4" name="group"/> <label for="radio-4"></label> </div> </main> <script src="js/index.js"></script>
</body>
</html>

Google Dots Radio Buttons - Script Codes CSS Codes

@keyframes fade { 0%, 50% { opacity: 0; transform: scale(0); }
}
@keyframes dot-anim { 0% { top: -4vw; } 50% { top: 4vw; } 100% { top: -4vw; }
}
@keyframes checked-radio-3 { 0% { top: -10vw; transform: scale(0); } 100% { top: 0; transform: scale(1); }
}
@keyframes unchecked-radio-3 { 0% { bottom: 0; transform: scale(1); } 100% { bottom: -10vw; transform: scale(0); }
}
@keyframes checked-radio-4 { 0% { transform: rotate(0) translateY(-4.8vw) scale(.2); } 83% { transform: rotate(360deg) translateY(-2.5vw) scale(1); transform-origin: 2vw; } 88% { transform: translateY(.6vw) scale(1); } 93% { transform: translateY(-.9vw) scale(1); } 100% { transform: translateY(0) scale(1); }
}
@keyframes unchecked-radio-4 { 25% { top: -6.5vw; } 50% { top: 9vw; } 75% { top: -10vw; } 100% { top: -10vw; transform: scale(0); }
}
*, *:before, *:after { margin: auto; padding: 0; outline: 0; overflow: hidden; box-sizing: border-box;
}
html, body { background: white; }
main, .container, label, label:before, label:after { position: absolute; top: 0; bottom: 0; left: 0; right: 0;
}
main { width: 95vw; height: 50vw;
}
.container { width: 100%; height: 100%; animation: fade 1s;
}
label { display: inline-block; width: 10vw; height: 10vw; border-radius: 50%; transition: all .2s ease-in-out; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-duration: 1.6s; animation-name: dot-anim;
}
.radio:checked + label { animation-play-state: paused;
}
label:before { content: ""; position: absolute; width: 5vw; height: 5vw; background: white; border-radius: 50%; box-shadow: rgba(0, 0, 0, 0.117647) 0 0 .8vw 0, rgba(0, 0, 0, 0.239216) 0 .8vw .8vw 0; transition: all .2s;
}
label:hover:before { box-shadow: rgba(0, 0, 0, 0.0784314) 0 0 1vw 0, rgba(0, 0, 0, 0.239216) 0 1vw 1vw 0;
}
label:after { content: ""; position: absolute; width: 10vw; height: 10vw; background: rgba(255, 255, 255, .5); border-radius: 50%; transform: scale(0);
}
.radio:checked + label:after { background: transparent; transition: all .5s; transform: scale(1);
}
/**** BLUE Radio button code ****/
#radio-1 + label { left: -60vw; background: #4285F4; animation-delay: 0s;
}
#radio-1 + label:before { transform: scale(0);
}
#radio-1:checked + label:before { transform: scale(1); transition: all .4s;
}
/**** RED radio button code ****/
#radio-2 + label { left: -20vw; background: #EA4335; border-color: #EA4335!important; animation-delay: .2s;
}
#radio-2:checked + label { background: white; border: 1vw solid; box-shadow: inset rgba(0, 0, 0, 0.117647) 0 0 .6vw 0, inset rgba(0, 0, 0, 0.239216) 0 .6vw .8vw 0; transition: all .2s;
}
#radio-2:checked + label:before { width: 5vw; height: 5vw; background: #EA4335; transition: all .4s;
}
/* for IE */
#radio-2:not(:checked) + label:before { width: 8vw; height: 8vw; background: #EA4335; box-shadow: none;
}
/**** YELLOW radio button code ****/
#radio-3 + label { left: 20vw; background: #FBBC05; animation-delay: .4s;
}
#radio-3 + label:before { /* background: #E91E63; */ transform: scale(0); animation-name: unchecked-radio-3; animation-duration: .2s; animation-timing-function: ease-in-out;
}
#radio-3:checked + label:before { animation-name: checked-radio-3; animation-duration: .4s; animation-timing-function: ease-in-out; animation-fill-mode: both;
}
/**** GREEN radio button code ****/
#radio-4 + label { left: 60vw; background: #34A853; animation-delay: .6s;
}
#radio-4 + label:before { /* background: #8BC34A; */ animation: unchecked-radio-4 .5s both;
}
#radio-4:checked + label:before { animation-name: checked-radio-4; animation-duration: .6s; animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1); animation-fill-mode: both;
}
[type="radio"] { display: none;
}

Google Dots Radio Buttons - Script Codes JS Codes

// Just check/uncheck to see the effects transitions.
// Inspiration
//design.google.com/articles/evolving-the-google-identity/
Google Dots Radio Buttons - Script Codes
Google Dots Radio Buttons - Script Codes
Home Page Home
Developer Victor Freire
Username victorfreire
Uploaded September 07, 2022
Rating 4.5
Size 2,834 Kb
Views 24,288
Do you need developer help for Google Dots Radio Buttons?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Victor Freire (victorfreire) Script Codes
Name
Archery
Wi-Fi Icon Spinner inspired by Material Design
Clip-Path Polygons
SCSS Grid
Save for later...
Gooey Light Rings Loader
Search Box and Button Animated
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!