HTML
<!DOCTYPE html>
<html lang=«en«>
<head>
<meta charset=«UTF-8« />
<meta http-equiv=«X-UA-Compatible« content=«IE=edge« />
<meta name=«viewport« content=«width=device-width, initial-scale=1.0« />
<title>Radio button personalizado</title>
<link rel=«stylesheet« href=«style.css« />
</head>
<body>
<input type=«radio« name=«btn« />
<input type=«radio« name=«btn« />
</body>
</html>
CSS
* {
margin: 0;
padding: 0;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #000;
}
input[type=«radio«] {
position: relative;
width: 120px;
height: 40px;
margin: 10px;
outline: none;
cursor: pointer;
background: #000;
-webkit-appearance: none;
border-radius: 20px;
box-shadow: -5px -5px 20px rgba(255, 255, 255, 0.1),
5px 5px 10px rgba(0, 0, 0, 1), inset -2px -2px 5px rgba(255, 255, 255, 0.1),
inset 2px 2px 5px rgba(0, 0, 0, 0.5), 0 0 0 2px #1f1f1f;
transition: 0.5s;
}
input[type=«radio«]:checked {
background: #dc143c;
}
input[type=«radio«]::before {
content: «»;
position: absolute;
top: 0;
left: 0;
width: 80px;
height: 40px;
background: linear-gradient(to top, #000, #555);
border-radius: 20px;
box-shadow: 0 0 0 1px #232323;
transition: 0.5s;
transform: scale(0.98, 0.96);
}
input[type=«radio«]:checked:before {
left: 40px;
}
input[type=«radio«]::after {
content: «»;
position: absolute;
left: 60px;
top: calc(50% – 2px);
width: 15px;
height: 4px;
background: #555;
border-radius: 5px;
transition: 0.5s;
}
input[type=«radio«]:checked::after {
left: 100px;
background: #dc143c;
box-shadow: 0 0 5px #dc143c, 0 0 15px #dc143c, 0 0 30px #dc143c;
}
0 comentarios