Close Menu
    HTML & CSS

    How to make Monster Tooth Toggle button using HTML CSS

    Coding StellaBy No Comments9 Mins Read

    Let’s create a Monster Tooth Toggle button using HTML and CSS. This project will add a playful touch to your web page and is perfect for beginners to practice their HTML and CSS skills.

    We’ll keep it simple and straightforward, using HTML to structure the toggle button and CSS to style it as a cute monster tooth. No need for complex coding – just some fun designing!

    Let’s jump in and craft this Monster Tooth Toggle. It’s a quirky addition to any website and a great way to learn some basic web development techniques. Let’s get started and give your visitors a toothy surprise!

    Let’s get started and make those teeth!

    HTML :

    This HTML code creates a visually appealing toothed toggle switch with accompanying light bulb indicators. The switch is structured using checkboxes and styled spans. The toggle switch consists of a track divided into two sections representing the top and bottom parts, each adorned with multiple spans forming a tooth-like design. Additionally, two light bulb indicators are included within a div, visually signaling the toggle state. This combination of elements results in an intuitive and visually engaging user interface for toggling functionality.

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Toothed Toggle - CSS</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="./style.css">
</head>
<body>

<div class="toggle">
  <input type="checkbox" id="btn">
  <label for="btn">
    <span class="track">
      <span class="track-top">
        <span></span><span></span><span></span><span></span><span></span>
        <span></span><span></span><span></span><span></span><span></span>
      </span>
      <span class="track-bot">
        <span></span><span></span><span></span><span></span><span></span>
        <span></span><span></span><span></span><span></span><span></span>
      </span>
    </span>
    <span class="thumb"></span>
  </label>
  <div class="lights">
    <span class="light-off"></span>
    <span class="light-on"></span>
  </div>
</div>

</body>
</html>

    CSS :

    This code creates a stylish toggle switch and light bulbs using HTML and CSS. It imports the Roboto font, defines some design variables, styles the elements, and adds animations for when the switch is toggled on or off and for the light bulbs. It’s a visually appealing design for toggling switches with accompanying light indicators.

    @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap');	

:root {
  --sz: 9vmin;
  --on: #4CAF50;
  --of: #f50000;
  --gr: #666666;
  --tr: all 0.5s ease 0s;
  --lg: var(--of);
}	

* {
  box-sizing: border-box;
  transition: var(--tr);
}

body {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(45deg, #1c2123, #1f2425);
  font-family: 'Roboto', Arial, Helvetica, serif;
}

body:before, body:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: 
    repeating-conic-gradient(#0002 0.00005%, #fff0 .0005%, #fff0 .005%, #fff0 .0005%), 
    repeating-conic-gradient(#0002 0.00001%, #fff0 .00009%, #fff0 .00075%, #fff0 .000025%);
  opacity: 0.75;
  filter: blur(0.75px);
}

.toggle {
  position: relative;
  width: calc(var(--sz) * 6);
  height: calc(var(--sz) * 2);
  display: flex;
  align-items: center;
  justify-content: center;
}

input {
  display: none;
}

label[for=btn] {
  position: absolute;
  width: calc(var(--sz) * 6);
  height: calc(var(--sz) * 2);
  background: #616774;
  border-radius: var(--sz);
  box-shadow: 
    0 0 calc(var(--sz) / 50) calc(var(--sz) / 50) #0006, 
    0 -4px calc(var(--sz) / 10) calc(var(--sz) / 500) #000d, 
    0 0px calc(var(--sz) / 10) calc(var(--sz) / 50) #fff8, 
    0 -4px calc(var(--sz) / 5) calc(var(--sz) / 50) #000c;
}	

.track {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: var(--sz);
  overflow: hidden;
  background: #191e1e;
  box-shadow: 0 calc(var(--sz) / 3) calc(var(--sz) / 2) 0 #000 inset;
}

#btn:checked + label .track:before {
  left: 0%;
}

.thumb {
  position: absolute;
  width: calc(calc(var(--sz) * 2) - calc(var(--sz) / 5));
  height: calc(calc(var(--sz) * 2) - calc(var(--sz) / 5));
  top: calc(calc( var(--sz) / 10) + calc(var(--sz) / 200));
  left: calc(calc( var(--sz) / 10) + calc(var(--sz) / 100));
  background: linear-gradient(180deg,  #3f4447, #262727);
  border-radius: var(--sz);
  box-shadow: calc(var(--sz) / -25) calc(var(--sz) / 25) calc(var(--sz) / 30) 0 #fff2 inset, 0 0 calc(var(--sz) / 10) calc(var(--sz) / 50) #000c;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  overflow: hidden;
  animation: move-thumb 0.5s ease 0s;
}

@keyframes move-thumb {
  0% { 
    --lg: var(--of);
    left: calc(calc(100% - calc(calc(var(--sz) * 2) - calc(var(--sz) / 3))) - calc(calc( var(--sz) / 10) + calc(var(--sz) / 7))); 
  }
  25%, 75% { 
    --lg: #999999; 
  }
  100% { 
    --lg: var(--on);
    left: calc(calc( var(--sz) / 10) + calc(var(--sz) / 100)); 
  }
}

.thumb:before {
  content: "";
  --cl: #2c3133;
  position: absolute;
  background: var(--cl);
  width: calc(var(--sz) / 12);
  height: calc(var(--sz) / 1.35);
  border-radius: var(--sz);
  box-shadow: calc(var(--sz) /5) 0 0 0 var(--cl), calc(var(--sz) / -5) 0 0 0 var(--cl);
  filter: drop-shadow(0px 1px 2px #000) drop-shadow(0px -1px 0px #fff4) blur(0.65px);
}

.thumb:after {
  content: "";
  position: absolute;
  background: radial-gradient(circle at 50% 55%, #fff0 calc(var(--sz) / 1.125), var(--lg) calc(var(--sz) / 0.9));
  width: 100%;
  height: 100%;
  border-radius: var(--sz);
  transition: var(--tr);
  transition-property: --lg;
  animation: shine-thumb-off 0.5s ease 0s 1;
  animation-fill-mode: forwards;
}

#btn:checked + label .thumb {
  left: calc(calc(100% - calc(calc(var(--sz) * 2) - calc(var(--sz) / 3))) - calc(calc( var(--sz) / 10) + calc(var(--sz) / 7)));

}

#btn:checked + label .thumb:after {
  animation: shine-thumb-on 0.5s ease 0s 1;
  animation-fill-mode: forwards;
  transition: var(--tr);
  transition-property: --lg;
}

@keyframes shine-thumb-on {
  0% { --lg: var(--of); }
  50% { --lg: var(--gr); }
  100% { --lg: var(--on); }
}

@keyframes shine-thumb-off {
  0% { --lg: var(--on); }
  50% { --lg: var(--gr); }
  100% { --lg: var(--of); }
}

.track-top, .track-bot  {
  position: absolute;
  width: 120%;
  height: calc(var(--sz) / 2.25);
  left: -10%;
  top: calc(var(--sz) / -2.5);
  transform-origin: 22% 100%;
  transform: rotate(5deg);
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  opacity: 0.85;
  animation: t-top-l 0.5s ease 0s 1 reverse;
  animation-fill-mode: forwards;
}

.track span span {
  background: 
    linear-gradient(0deg, #fff8, #fff0), 
    linear-gradient(180deg, #222, #666);
  width: calc(var(--sz) / 1.6);
  height: calc(var(--sz) / 2);
  display: inline-flex;
  border-radius: 0 0 calc(var(--sz) / 8) calc(var(--sz) / 8);
  box-shadow: 0 0 1px 0 #fff;
}

.track-bot span {
  background: 
    linear-gradient(180deg, #fff8, #fff0), 
    linear-gradient(0deg, #222, #666) !important;
  border-radius: calc(var(--sz) / 8) calc(var(--sz) / 8) 0 0 !important;
}

.track-bot {
  left: -10%;
  top: inherit;
  bottom: calc(var(--sz) / -2.25);
  transform-origin: 22% 100%;
  transform: rotate(-5deg);
  animation: t-bot-l 0.5s ease 0s 1 reverse;
  animation-fill-mode: forwards;
}

#btn:checked + label .track .track-top {
  animation: t-top-r 0.5s ease 0s 1;
  animation-fill-mode: forwards;
}

@keyframes t-top-r {
  0% { transform: rotate(5deg); transform-origin: 22% 100%; }
  50% { transform: rotate(0deg);  transform-origin: 22% 100%; }
  50.01% { transform: rotate(0deg);  transform-origin: 78% 100%; }
  100% { transform: rotate(-5deg);  transform-origin: 78% 100%; }
}
@keyframes t-top-l {
  0% { transform: rotate(5deg); transform-origin: 22% 100%; }
  50% { transform: rotate(0deg);  transform-origin: 22% 100%; }
  50.01% { transform: rotate(0deg);  transform-origin: 78% 100%; }
  100% { transform: rotate(-5deg);  transform-origin: 78% 100%; }
}

#btn:checked + label .track .track-bot {
  animation: t-bot-r 0.5s ease 0s 1;
  animation-fill-mode: forwards;
}

@keyframes t-bot-r {
  0% { transform: rotate(-5deg); transform-origin: 22% 100%; }
  50% { transform: rotate(0deg);  transform-origin: 22% 100%; }
  50.01% { transform: rotate(0deg);  transform-origin: 78% 100%; }
  100% { transform: rotate(5deg);  transform-origin: 78% 100%; }
}
@keyframes t-bot-l {
  0% { transform: rotate(-5deg); transform-origin: 22% 100%; }
  50% { transform: rotate(0deg);  transform-origin: 22% 100%; }
  50.01% { transform: rotate(0deg);  transform-origin: 78% 100%; }
  100% { transform: rotate(5deg);  transform-origin: 78% 100%; }
}


.lights {
  position: absolute;
  width: 100%;
  height: calc(var(--sz) / 1.75);
  top: calc(var(--sz) * -1.2);
  display: flex;
  justify-content: space-between;
  padding: 0 calc(var(--sz) / 1.5);
  z-index: 1;
}

.lights span {
  background: #121212;
  position: relative;
  width: calc(var(--sz) / 1.75);
  height: calc(var(--sz) / 1.75);
  border-radius: var(--sz);
  box-shadow: 
    0 0px calc(var(--sz) / 50) calc(var(--sz) / 50) #0008, 
    0 -4px calc(var(--sz) / 10) calc(var(--sz) / 500) #000, 
    0 2px calc(var(--sz) / 10) calc(var(--sz) / 500) #fff8, 
    0 0px calc(var(--sz) / 20) calc(var(--sz) / 25) #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lights span:before {
  content: "off";
  font-size: calc(var(--sz) / 2.4);
  text-align: center;
  width: 200%;
  position: absolute;
  top: calc(var(--sz) / -1.45);
  left: -50%;
  color: #ffffff3d;
  text-shadow: 0px -2px 2px #0008, 0px 1px 2px #fff4;
  background: -webkit-linear-gradient(#0000003b 25%, var(--lg) 75%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: #71717170;
}

.lights span + span:before {
  content: "on";
  --lg: var(--gr);
}

.lights span:after {
  content: "";
  color: #fff;
  transition: var(--tr);
  width: calc(100% - calc(var(--sz) / 15));
  height: calc(100% - calc(var(--sz) / 15));
  position: absolute;
  background: radial-gradient(circle at 50% 32%, #fff5 0 calc(var(--sz) / 20), #000 calc(var(--sz) / 3) calc(var(--sz) / 3));
  border-radius: var(--sz);
  box-shadow: 
    0 0px calc(var(--sz) / 50) calc(var(--sz) / 50) #0008 inset, 
    0 -4px calc(var(--sz) / 10) calc(var(--sz) / 500) #000 inset, 
    0 2px calc(var(--sz) / 10) calc(var(--sz) / 500) #fff8 inset, 
    0 0px calc(var(--sz) / 20) calc(var(--sz) / 25) #000 inset;
}


/* off */
span.light-off:after {
  box-shadow: 
    0 0 calc(var(--sz) / 2.5) 0 var(--lg), 
    0 0 calc(var(--sz) / 3) calc(var(--sz) / 20) var(--lg) inset, 
    0 calc(var(--sz) / -20) calc(var(--sz) / 10) calc(var(--sz) / 10) #000 inset;
  background: radial-gradient(circle at 50% 32%, #fff 0 calc(var(--sz) / 20), #fff8 calc(var(--sz) / 3) calc(var(--sz) / 3));
}

#btn:checked + label + .lights span.light-off:after {
  box-shadow: 
    0 0 calc(var(--sz) / 3) 0 #f5000020, 
    0 0 calc(var(--sz) / 3) calc(var(--sz) / 20) #f5000020 inset;
  background: radial-gradient(circle at 50% 32%, #fff5 0 calc(var(--sz) / 20), #000 calc(var(--sz) / 3) calc(var(--sz) / 3));
}


/* on */
span.light-on:after {
  box-shadow: 
    0 0 calc(var(--sz) / 3) 0 #00f56d20, 
    0 0 calc(var(--sz) / 3) calc(var(--sz) / 20) #00f56d20 inset;
}

#btn:checked + label + .lights span.light-on:after {
  --lg: var(--on);
  box-shadow: 
    0 0 calc(var(--sz) / 2.5) 0 var(--lg), 
    0 0 calc(var(--sz) / 3) calc(var(--sz) / 20) var(--lg) inset, 
    0 calc(var(--sz) / -20) calc(var(--sz) / 10) calc(var(--sz) / 10) #000 inset;
  background: radial-gradient(circle at 50% 32%, #fff 0 calc(var(--sz) / 20), #fff2 calc(var(--sz) / 3) calc(var(--sz) / 3));
}

#btn:checked + label + .lights span.light-on:before {
  --lg: var(--on);
}

#btn:checked + label + .lights span.light-off:before {
  --lg: var(--gr);
}

    In conclusion, crafting a Monster Tooth Toggle using HTML and CSS is a delightful way to add personality to your web projects. Throughout this simple project, we’ve learned how to structure elements with HTML and style them creatively with CSS to create a playful toggle button. Whether you’re a beginner or looking for a fun coding challenge, this project offers a charming opportunity to experiment and enhance your skills.

    If your project has problems, don’t worry. Just click to download the source code and face your coding challenges with excitement. Have fun coding!

    Share.

    Related Posts

    Add A Comment
    Leave A Reply