Radio Button Animation Pure CSS
How do I make an radio button animation pure css?
What is a radio button animation pure css? How do you make a radio button animation pure css? This script and codes were developed by Salman Raza on 02 November 2022, Wednesday.
Radio Button Animation Pure CSS - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Radio Button Animation Pure CSS</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <main> <h1>Select one: ( Who is your Best Friend)</h1> <div class="friends"> <input id="input1" name="radio" type="radio" /> <label for="input1">Salman Raza</label> <input id="input2" name="radio" type="radio" /> <label for="input2">Shahideen Shaikh</label> <input id="input3" name="radio" type="radio" /> <label for="input3">Shahrukh Khan</label> <input id="input4" name="radio" type="radio" /> <label for="input4">Arman Ali</label> <span id="slider"></span> </div> </main>
</body>
</html>
Radio Button Animation Pure CSS - Script Codes CSS Codes
@import url('https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900');
@import url('https://fonts.googleapis.com/css?family=Playball');
*{margin:0;padding:0;box-sizing:border-box;}
body { width: 100%; height: 100%; text-align: center; position: relative; background-image: linear-gradient(to right, #ffecd2 0%, #fcb69f 100%); font-family: 'Lato', sans-serif; overflow: hidden; position: relative;
}
main {width: 100%; height: 100vh; margin: 0; float: left; position: relative;}
main:after { content: 'Salman Raza'; font-family: 'Playball', cursive; position: absolute; bottom: 0px; left: 50%; color: rgba(0, 0, 0, 0.017); font-size: 200px; line-height: 140px; white-space: nowrap; text-transform: lowercase; transform: translateX(-50%);
}
h1{text-align:center;margin:10% 0 5%;font-weight: 300;}
.friends{ position:relative; width:100%; max-width: 1170px; margin:0 auto; display: table; text-align: center;
}
input[type="radio"]{ position:absolute; right:1000%;
}
label{ display: inline-block; width:250px; height: 60px; line-height: 60px; text-align: center; font-size: 22px; border:1px solid #fff; cursor:pointer; margin-right: 20px; z-index: 1; position: right; margin-bottom: 20px; transition: all 0.8s ease-in-out 0s;
}
label:last-child {margin-right: 0;}
#input1:checked ~ label[for="input1"],
#input2:checked ~ label[for="input2"],
#input3:checked ~ label[for="input3"],
#input4:checked ~ label[for="input4"]
{ background-color: rgba(255,255,255,1.0); color: #fff; border-radius: 5px;
}
#input1:checked ~ label[for="input1"]{box-shadow: 0 -60px 0 darkgreen inset;border-color: darkgreen;}
#input2:checked ~ label[for="input2"]{box-shadow: 0 -60px 0 darkred inset; border-color: darkred; }
#input3:checked ~ label[for="input3"]{box-shadow: 0 -60px 0 darkblue inset; border-color: darkblue; }
#input4:checked ~ label[for="input4"]{box-shadow: 0 -60px 0 darkgreen inset; border-color: darkgreen; }
label[for="input1"]:after,
label[for="input2"]:after,
label[for="input3"]:after,
label[for="input4"]:after { visibility: hidden; opacity: 0; position: absolute; width: 50%; background-color: #fff; top: 0; left: 50%; transform: translateX(-50%); padding: 15px 30px; border-radius: 5px; transition: all 0.8s ease-in-out 0s; font-size: 20px; line-height: 30px; box-shadow: 0 0 15px rgba(0,0,0,0.2); white-space:pre;
}
#input1:checked ~ label[for="input1"]:after,
#input2:checked ~ label[for="input2"]:after,
#input3:checked ~ label[for="input3"]:after,
#input4:checked ~ label[for="input4"]:after
{ top: 200px; visibility: visible; opacity: 1; color: #000;
}
label[for="input1"]:after {content: 'Congratulation bro!\A Salman is your best friend now'; }
label[for="input2"]:after {content: 'Congratulation bro!\A Shahideen Shaikh is your best friend now'; }
label[for="input3"]:after {content: 'Congratulation bro!\A Shahrukh Khan is best friend now'; }
label[for="input4"]:after {content: 'Congratulation bro!\A Arman Ali is best friend now'; }
Developer | Salman Raza |
Username | salmanraza |
Uploaded | November 02, 2022 |
Rating | 3 |
Size | 2,538 Kb |
Views | 40,480 |
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!
Name | Size |
Event short details Card view | 4,004 Kb |
Testimonial carousel | 3,457 Kb |
Hamburger Menu Animation | 2,580 Kb |
Product showcase | 3,787 Kb |
Progress with CSS variables | 2,863 Kb |
Short Premium Event Card View | 4,626 Kb |
Event card View | 3,817 Kb |
App design | 8,269 Kb |
Dynamic Add li using jQuery | 4,867 Kb |
Close button with css and jquery | 2,661 Kb |
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!
Name | Username | Size |
Fluid Grid 12 | Alexoliverwd | 2,309 Kb |
Animated Logo | Shakdaniel | 2,672 Kb |
Wikipedia Viewer | Thomasvaeth | 2,549 Kb |
AngularJS Datalist Directive | M-e-conroy | 2,366 Kb |
Gears | Synvox | 3,278 Kb |
Ghost | Mghayour | 11,738 Kb |
Vue.js Lazy Loading | Kjbrum | 3,620 Kb |
Font stack | Adrianjacob | 1,868 Kb |
Gradients | Karpovsystems | 2,394 Kb |
Simple DevTools | Deegill | 2,511 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!