Toggle Button In HTML & CSS | Toggle Switch Like Phone & IPhone

Buttons, we all have seen a lot of places, whatever on the computer,laptop,web and also in mobile. There are many types of buttons, but nowadays a button type is very popular that called toggle button. This type of button is become popular maybe because of Phone and iPhone. Because they have this type of button in their Operation Sysytem. You can see toggle buttons on computer, phone and many websites in mode field etc. In this article I am going to explain a simple HTML and CSS coding for creating Toggle Button.

There are many stylish toggle button with HTML and CSS. But today I will show you the use of Html and CSS as a Toggle Button. This source code is really simple and easy to understand.

Toggle Button Source Code Checkout Here Below:

This Toggle Button made with Only HTML and CSS. Copy source code from here.

For creating this program you have to create HTML and CSS File. Follow the steps to creating this without any error.

toggle.html or toggle.htm

Create an HTML file named ‘toggle.html‘ and put these codes given below.
toggle.css

Create a CSS file named ‘toggle.css‘ and put these codes given below.

<!-- Code By TechnoNiit -->
.switch {
  position: relative;
  display: inline-block;
  width: 100px;
  height: 50px;
}

.switch input {
  display:none;
}
 
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #333;
  transition: .4s;
}
  
.slider:before {
  position: absolute;
  content: "";
  height: 42px;
  width: 40px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: .4s;
}
 
input:checked + .slider {
  background-color: #cecece;
}
 
input:focus + .slider {
  box-shadow: 0 0 1px #cecece;
}
 
input:checked + .slider:before {
  transform: translateX(52px);
}
 
.slider.round {
  border-radius: 34px;
}
 
.slider.round:before {
  border-radius: 50%;
}
 
#box {
  padding-top:50px;
}
 
.heading {
  font-size:40px;
  font-weight:bold;
  font-family:Impact, Serif;
}
 
body {
  background-color: white;
}
 
.centereddiv {
  padding-top:20px;
}
 
.subtitle {
  padding-top:20px;
  font-family:Times, Serif;
  font-size:40px;
}

That’s it. Now you have successfully created zomato home page. If you have any doubt or question comment down below.
I hope this post will useful to you, Thanks For Visiting, Keep Visiting.

TECHNO NIIT

Toggle Button Like Phone & IPhone

Toggle Button In HTML & CSS | Toggle Switch Like Phone & IPhone

Toggle Button Source Code Checkout Here Below:

No comments

Social Counter

Contact Form

Popular

Facebook

Youtube

Recent in Technology

Labels

Recent Posts

Archive

Categories

Business