Samar Yadav Samar Yadav - 1 month ago 7
CSS Question

Insert text in toggle button html-css

I have this.

enter image description here

enter image description here

I want this.

enter image description here

enter image description here

this is such a long code. I really dont want to post it. But here it is

html:

<!DOCTYPE html>
<html>
<head>
<title>check</title>
<link rel="stylesheet" type="text/css" href="main2.css">
</head>
<body>
<label class="switch">
<input type="checkbox">
<div class="slider"></div>
</label>
</body>
</html>


now css code is:

.switch {
position: relative;
display: inline-block;
width: 180px;
height: 34px;
}


/* Hide default HTML checkbox */
.switch input {display:none;}

/* The slider */

.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: red;
-webkit-transition: .4s;
transition: .4s;
}

.slider:before {
position: absolute;
content: "";
height: 36px;
width: 60px;
left:0px;
bottom: -1px;
top: -1px;
background-color: black;
-webkit-transition: .4s;
transition: .4s;
}

input:checked + .slider {
background-color: #2196F3;
}


input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
-webkit-transform: translateX(120px);
-ms-transform: translateX(120px);
transform: translateX(120px);
}


i know it's such a long code . But very easy to understand. Thanks for helping.

Answer

.switch {
  position: relative;
  display: inline-block;
  width: 180px;
  height: 34px;
}

 .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: red;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "aaa";
  height: 36px;
  width: 60px;
  left:0px;
  bottom: -1px;
  top: -1px;
  background-color: black;
  -webkit-transition: .4s;
  transition: .4s;
}


input:checked + .slider {
  background-color: #2196F3;
}


input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(120px);
  -ms-transform: translateX(120px);
  transform: translateX(120px);
}

.text {
  color: white;
}

.text:after {
  position: absolute;
  top: 7px;
  right: 25px;
  content: "Switch off";
  -webkit-transition: opacity 0.5s ease-in-out;
  -moz-transition: opacity 0.5s ease-in-out;
  transition: opacity 0.5s ease-in-out;
}
.text:before {
  position: absolute;
  top: 7px;
  left: 25px;
  content: "Switch on";
  -webkit-transition: opacity 0.5s ease-in-out;
  -moz-transition: opacity 0.5s ease-in-out;
  transition: opacity 0.5s ease-in-out;
}

input + .slider + .text:after {
  opacity: 1;
}
input + .slider + .text:before {
  opacity: 0;
}


input:checked + .slider + .text:after {
  opacity: 0;
}

input:checked + .slider + .text:before {
  opacity: 1;
}
<!DOCTYPE html>
<html>
<head>
    <title>check</title>
    <link rel="stylesheet" type="text/css" href="main2.css">
</head>
<body>
<label class="switch">
  <input type="checkbox">
  <div class="slider"></div>
  <div class="text"></div>
</label>
</body>
</html>

Comments