how to make a CSS button how to make an amazing button in CSS amazing method to make an amazing button using HTML and CSS
What’s up, everyone? Have you ever wanted to make your own custom button that looked amazing? Well, today I’m going to show you how to do that using HTMLand CSS! To start with, let’s think about what we want our button to look like.
Preview of the CSS button
The HTML code
<!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>Checkbox for beginners</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<label class="switch">
<input type="checkbox" />
<span class="slider"></span>
</label>
</body>
</html>
The CSS code
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background-color: black;
}
.switch {
font-size: 17px;
position: relative;
display: inline-block;
width: 62px;
height: 35px;
}
.switch input {
opacity: 1;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0px;
background: #fff;
transition: 0.4s;
border-radius: 30px;
border: 1px solid #ccc;
}
.slider:before {
position: absolute;
content: "";
height: 1.9em;
width: 1.9em;
border-radius: 16px;
left: 1.2px;
top: 0;
bottom: 0;
background-color: white;
box-shadow: 0 2px 5px #999999;
transition: 0.4s;
}
input:checked + .slider {
background-color: #5fdd54;
border: 1px solid transparent;
}
input:checked + .slider:before {
transform: translateX(1.5em);
}
Thanks for reading this web tutorial. If you find this helpful then please share it with your friends. Visit my website for more content.
Discussion (0)