CSS Toggle Switch with Text & Animation (Free Code)

CSS Toggle Switch with Text

If you want to make a CSS Toggle Switch with Text using HTML and CSS then this tutorial will help you. Here I have shown step by step how to make a CSS Toggle Switch. 

Earlier I shared with you many more types of Toggle Button with Text Enhancement Tutorial. Those designs were a bit complicated. This project is relatively simple. If you are a beginner then this design will help you completely.

Here I have used only HTML and CSS. This beautiful CSS Toggle Switch is made using one-line HTML and some amount of CSS. Toggle we use in different places. It is mainly used to turn on and off various options and to select any one of the many options.

CSS Toggle Switch with Text

Below is a demo that will help you learn how it works. Below you will find the required preview and source code.

See the Pen Untitled by Ground Tutorial (@groundtutorial) on CodePen.


As you can see above, a small area on the webpage has been created using input. Which contains a button. Normally the button is on. The button is along the right side of the input. The background color of the button is yellow and the text "on" is visible. 

When you click on the button, the button moves to the left of the input. The background color of the button will be black and the text "off" will be visible.

To build a CSS Toggle Switch with Text you need to have a basic idea about HTML and CSS.

Step 1: Basic structure of Toggle Switch

I have created the basic structure of this CSS Toggle button using the following HTML. Input has been used here.

<div class="wrapper" >
  <input type="checkbox">
</div>

I have designed the web page using the following CSS code.

body {
    padding:0;
    margin:0;
}

.wrapper{
    width:100%;
    height: 100vh;
    background-color: #375463;
    display: flex;
    justify-content: center;
    align-items: center;
}

Basic structure of Toggle Switch

Now the place of the check box has been designed. The width of this input: 120px, height: 50px and background color white has been used. I used box-shadow to add a shadow to it. 

.wrapper input[type=checkbox]{
    width:120px;
    height: 50px;
    background-color: #fff;
    -webkit-appearance:none;
    border-radius: 30px;
    outline: none;
    position: relative;
    box-shadow: inset 0 0 12px 0 rgba(0,0,0,.5);
    font-weight: bolder;
    font-size: 22px;
}

Toggle Switch with Text

Step 2: Create a Toggle button in the input

Now using before I have created a button in the input. Under normal circumstances, it is on the right side. 

Clicking on it moves to the left. Border-radius has been used to make this button width: 65px, height: 65px and round. In general, content: 'On' and background color are yellow.

.wrapper input[type=checkbox]:before{
    content: 'On';
    position: absolute;
    width: 65px;
    height: 65px;
    line-height: 65px;
    text-align: center;
    border-radius: 50%;
    background-color: #cfe012;
    box-shadow: 0 2px 10px 0 rgba(0,0,0,.5);
    left: 57px;
    top:-8px;
    transition-duration: .5s;
}

Create a Toggle button in the input

Step 3: Activate the CSS Toggle Switch with Text

Now this CSS Toggle Switch with Text has been activated. This means that when you click on that button, the content and background will change. After clicking on the button content: 'off' and the background color will be black.


.wrapper input:checked[type=checkbox]{
    background-color: #262626;
}
.wrapper input:checked[type=checkbox]:before{
    content: 'off';
    background-color: #262626;
    box-shadow: 0 2px 6px 0 rgba(0,0,0,.5);
    left: 0;
    transition-duration: .5s;
    color:#ffffff;
}

Activate the CSS Toggle Switch

I hope you have learned from the above tutorial how I created the CSS toggle button. Earlier I shared many more types of toggle button HTML tutorials. All the source code of this CSS Toggle Switch with Text project is in the button below.






Comments

Post a Comment

Tell me what you think ??😎

Popular posts from this blog

Splash Image Mask Using HTML and CSS (Free Code)

Image
Here you will learn how to create Splash Image Mask using HTML CSS . The CSS mask image is a kind of simple design where there will be a background color on the image.  Some parts of that background will be transparent. As a result, we get to see some of the images in the background. You can use this CSS Splash Image Mask in any background image.  Here I used HTML in Aklin which added image. Then I designed it with CSS. You can use this CSS mask background image in the background of any project. Below is a preview that will help you to know how this Splash Image Mask CSS was created. See the Pen Splash Image Mask using Html CSS by Shantanu Jana ( @shantanu-jana ) on CodePen . Here HTML and CSS are used to create this CSS mask-image property . For this, you create an HTML and CSS file.  Copy all the code given below and add it to your file. Or use the download button at the bottom of the article to download the code for this Splash Image Mask . HTML Code: The following
Read more

Simple Day Night Toggle Button Using HTML and CSS

Image
Day-Night Toggle Button is a common web element that is often found on websites. This Day Night Toggle Switch in the navigation bar helps to choose the dark and light theme of the website. Currently, the Day And Night Toggle Switch can be seen on almost all major websites starting from Facebook and Instagram. Demo Download This article will help you to know step by step how to create Day Night Toggle Button using CSS . This type of CSS Toggle Button is used to create HTML checkboxes . Here's how to easily create a Toggle Switch using the checkboxes. CSS Day Night Toggle Button Although there are many such tutorials on the Internet. But here I will tell you how to make Day Night Toggle Button and how to implement it in your project. A check box was first created using HTML input to create this button. Then that checkbox is shaped like a button by CSS. To make CSS Day Night Toggle Switch you must have some idea about HTML and CSS. This is not the first time I ha
Read more

Simple RGB Color Generator Using JavaScript & CSS

Image
In this article, you will learn how to create RGB Color Generator using JavaScript. Earlier I shared with you the project of different types of JavaScript color generators . Some projects create background colors, some gradient colors, and some generate random colors.  Using this simple RGB Color Generator you can manually generate RGB color . It is much more modern and professional than other color generators. Here you can mix different colors together and create gradients.  This JavaScript RGB Color Generator project has various control buttons. With the help of which you can create gradients by adding colors in different ways.  JavaScript RGB Color Generator Many times I use different applications or websites to create my gradient color . In that case, such a project will help you. You can get the required code of the color you have created from here. Which you can copy directly and use as CSS code. Below I have given a demo that will help you to know how this project (RGB Color
Read more