codemediaweb.com

Code Media

hire me

Toggle Switch with Text using HTML and CSS

by
CSS Toggle Switch with Text

Here you will learn how to create a Toggle Switch with Text using CSS. Here I will discuss with you what CSS Toggle Switch is and how it can be made.

There are many tutorials on making this Toggle button on the internet but here you will find some extras. I will discuss the issues that arise when creating Toggle Switch HTML CSS. With that, I have shared all the source code here. 

But don’t worry if you are a beginner. I have shared with you the complete step-by-step tutorial on making this CSS Toggle Switch with Text.

In the meantime, I have shared a tutorial that will help you to know how to integrate this Toggle Switch with your project.

CSS Toggle Switch with Text

This type of HTML Toggle Switch is created using HTML checkboxes. Here too I used the checkbox and then designed it by CSS.

See the Pen
Gender Toggle Button by Shantanu Jana (@shantanu-jana)
on CodePen.

As you can see, an area was first created on the webpage. Which will basically serve as the background of the checkbox button. 

Then there is a small button on it. In general design, the button moves from left to right when you click on that checkbox. However, in the case of this design, the position of the button does not change.

It is on the left and will be on the left after you click. However, some other changes can be seen here. Basically, this button will select either male or female. 

How To Create a Toggle Switch with Text

I used HTML CSS to create this. No JavaScript or external links are used here. Now is the time to learn step-by-step how I created Toggle Switch with Text. For this, you must have an idea about HTML CSS.

Under normal circumstances, when you open this Toggle Switch with Text, the text “male” will appear. When you click on it, that text will change to “female” text. Some changes can be seen through the animation. 

HTML code of Toggle Switch with Text

I have created the basic structure of this Toggle Switch using the following HTML code. Below are all the HTML codes required for this project. 

First I created a check box using input. Then the button is created and two texts are added at the end.

<div id=”app-cover”>
  
  <input type=”checkbox” id=”checkbox”>
  <div id=”path”></div>
  <div id=”knob”>
    <div id=”bow”><i class=”icon ion-md-bowtie”></i></div>
  </div> 
  
  <div id=”gender”>
    <div id=”fe”>FE</div>
    <div id=”male”><span>MALE</span></div>
  </div>
  
</div>
HTML code of Toggle Switch with Text

The basic design of Toggle Switch 

Now some amount of CSS has been used and more of this project has been designed. First I designed the webpage. 

Here a light blue color is used in the background of the webpage. Even when an area has been created in which this Toggle Switch can be seen.

* {
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
html,
body {
  height: 100%;
  min-height: 100%;
}
body {
  margin: 0;
  background-color: #7aa0ff;
}
#app-cover {
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  width: 283px;
  height: 130px;
  margin: -65px auto 0 auto;
}
The basic design of Toggle Switch

Now I have designed the background of that button. As we have seen there is a small area in which the buttons and text can be seen. This button uses background width: 243px, height: 90px and background color white.

#checkbox {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 20px;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 3;
}
#path {
  width: 243px;
  height: 90px;
  padding: 20px;
  background-color: #f1f3f8;
  border-radius: 100px;
  box-shadow: 0 40px 80px #6381cd;
}
Toggle Switch with Text using HTML

Design the button inside the switch

Now a small toggle button has been created in the area of ​​that switch. In general design, the button changes position from left to right and from right to left. 

However, in this case, the position will not change. Button width: 90px, height: 90px and border-radius: 50% are used for rounding.

#knob {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 90px;
  height: 90px;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0 0 6px #dae4ff;
  transition: 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55) all;
  z-index: 1;
}
#bow {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -17px;
  width: 30px;
  margin: 0 auto;
  transition: 0.2s ease color;
}
#bow i {
  display: block;
  font-size: 34px;
  line-height: 1;
}
Design the button inside the switch

You need to design the text in this CSS Toggle Switch. Under normal circumstances, only “male” text can be seen. The text above will be hidden. Left: -115px has been used to hide the above text.

#gender {
  position: absolute;
  top: 50%;
  right: 40px;
  width: 80px;
  font-size: 30px;
  font-family: Roboto, Helvetica;
  text-align: right;
  line-height: 1;
  margin-top: -15px;
}
#fe {
  position: absolute;
  left: -115px;
  color: #e91e63;
  transition: 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55) all;
}
#male {
  left: 0;
}
#male,
#male span {
  position: relative;
}
#bow,
#male span {
  color: #7aa0ff;
}
#male span {
  z-index: 1;
}
Toggle Switch with Text using HTML and CSS

Activate Toggle Switch using CSS

Here’s a look at some of the changes you’ll make when you click on that button. I have added all the information for this using “: checked”.

#checkbox:checked ~ #knob {
  transform: rotateZ(-135deg);
  box-shadow: 0 0 6px #ffe2fe;
}
#checkbox:checked ~ #gender #fe {
  left: -34px;
}
#knob #bow.fe {
  color: #e91e63;
}
#male.fe:before {
  width: 100%;
}
Toggle Switch using CSS

This is a simple Toggle Switch with Text design yet I have shared step-by-step tutorials here. I hope you do not have any difficulty in understanding. Many may not be able to combine these codes together. For them, I have provided a download button below.

Please comment on how you like this Toggle Switch with Text design. I have already designed many more types of Toggle Switch CSS. Please let me know any questions or comments that you have.

Leave a comment