khushbumaheshwarii's button

About khushbumaheshwarii's button

khushbumaheshwarii's button is an animated CSS button by @khushbumaheshwarii. Preview the interaction, customize its HTML, styles and JavaScript, or download the files with creator credit.

Effects and categories

Toggle

Using this example

Copy the HTML or download index.html, style.css and app.js. Test keyboard focus, motion and contrast in your own project.

Usage, Tailwind and licensing questions

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <input type="checkbox" id="checkbox" style="display:none;" />
        <label for="checkbox" class="toggle1">
          <span></span>
        </label>
        <p class="ontext"> N </p>
        <p class="offtext"> FF </p>
      </div>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
      <script src="index.js"></script>
      
</body>
</html>

body {
    background-image: linear-gradient(to top, #d5d4d0 0%, #d5d4d0 1%, #eeeeec 31%, #efeeec 75%, #e9e9e7 100%);
    font-family: "Fredoka One", sarif;
    height: 100%;
    width: 100%;
    overflow: hidden;
  }
  
  .container {
    height: 100vh;
    margin: -10px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .offtext {
    color: black;
    font-size: 3em;
    margin-top: 46px;
    margin-left: -30px;
    transition: 0.7s all ease-in-out;
    z-index: -1;
  }
  
  .ontext {
    color: #f99324;
    font-size: 3em;
    margin-top: 46px;
    transform: translateX(-100px);
    transition: 0.7s all ease-in-out;
    opacity: 0;
    z-index: -1;
  }
  
  .toggle1 {
    position: relative;
    cursor: pointer;
    transition: 0.7s ease-in-out;
  }
  .toggle1:before {
    content: "";
    position: relative;
    width: 80px;
    height: 41px;
    top: 0;
    left: 0;
    opacity: 0.7;
    display: block;
    border: 2px solid black;
    border-radius: 2rem;
    transition: 0.7s ease-in-out;
  }
  .toggle1 span {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 35px;
    height: 35px;
    display: block;
    background: black;
    border: 1px solid black;
    border-radius: 50%;
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.4);
    transition: 0.7s ease-in-out;
  }
  .toggle1 span:before {
    content: "";
    position: absolute;
    display: block;
    margin: -8px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(249, 147, 36, 0.5);
    transform: scale(0);
    opacity: 1;
  }
  
  #checkbox:checked + .toggle1:before {
    border: 2px solid #f99324;
    transition: 0.7s ease-in-out;
  }
  #checkbox:checked + .toggle1 span {
    background: #f99324;
    transform: translateX(39px);
    border: 1px solid #f99324;
    box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.3);
    transition: 0.7s ease-in-out;
  }
  #checkbox:checked + .toggle1 span:before {
    transform: scale(2);
    opacity: 0;
    transition: all 0.5s ease;
  }
  
  /* UI Changes for when On option is selected. Add any further changes here. */
  .turnOn {
    margin: -10px;
    transition: all 0.7s ease-in-out;
  }
  .turnOn .toggle1 {
    transform: translateX(16px);
    transition: 0.7s ease-in-out;
  }
  .turnOn .offtext {
    opacity: 0;
    transform: translateX(-60px);
    transition: 0.7s ease-in-out;
  }
  .turnOn .ontext {
    opacity: 1;
    transform: translateX(20px);
    transition: 0.7s ease-in-out;
  }

$("input[type='checkbox']").change(function () {
    if ($(this).is(":checked")) {
      $(this).parent().addClass("turnOn");
    } else {
      $(this).parent().removeClass("turnOn");
    }
  });