DEV Community

Thecodepedia
Thecodepedia

Posted on • Originally published at thecodepedia.com on

CSS button with source code

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

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>

Enter fullscreen mode Exit fullscreen mode

css button with source code

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);
}

Enter fullscreen mode Exit fullscreen mode

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)