html

Toggle Button CSS

Web designers confront a variety of obstacles whenever it comes to developing a responsive website. Selecting among toggle buttons, checkboxes, or radio buttons seems to be one such problem. Conversely, utilizing toggle buttons is a significantly preferable option. A toggle switch/button is a design feature that allows you a way to switch among two alternative modes. For instance, you may utilize the toggle switch to provide a “Yes or No” response to a query.

Using HTML tags, there is no straightforward method to construct a toggle button. To construct a toggle switch button, we must employ CSS style.

Creating a Toggle Button:

Although there is no native HTML tag for constructing a toggle switch button, you can utilize the checkbox and afterwards change it by using CSS to construct a toggle button. For this purpose, we will use the “input” element with the attribute checkbox to build a “checkbox”.

The <input> element provides you with interactive controls intended for web-based forms that obtain information from users. Depending on the type of feature, the <input> element could be of several kinds. The “id” attribute in the input element refers to a particular style sheet assertion. The item with the specified id may also be modified through this.

The checkbox has a very small clickable area but the toggle switch requires a larger area. So, to enlarge the interactive area, enclose it in a label tag. Within the “label”, put a “span” tag to make a slider with CSS afterward. In HTML, the <label> tag is employed to increase the efficiency of cursor operators. The control is toggled when a person hits on the data inside the <label> element.

Below is the CSS code, to change the label element inside this script, the label element of the switch is also connected to the HTML checkbox element via its id. By pressing on a checkbox’s label, you may tick or dismiss it.

The above snippet will create a simple checkbox.

Now, we’ll use CSS style to give it the appearance of a toggle button. A webpage’s design info (CSS) is provided by using <style> attribute. The <style> tag describes the way components of HTML ought to display in a browser. Take the label element and adjust its width, height, position, background color, border-radius, and other properties. CSS’s width attribute determines the width of an object’s content domain. An element’s height is determined by the height attribute. The border-radius attribute gives an element’s outer border edge a rounded appearance. You may build circular corners with a single radius or elliptical corners with two radii.

Applying the CSS property “display: inline-block,” design guidelines could be added to specific HTML components. The position of an element with the attribute “position: relative;” is relative to its default position. A relatively-positioned item would alter from the default placement once the left, top, bottom, or right properties get modified. We will make it appear like a clickable area by giving it a pointer cursor and obscuring the checkbox with “cursor: pointer”.

You may utilize CSS’s cursor property to indicate the sort of cursor that the user should see. The label object’s width and height are necessary since they define the toggle button’s real clickable region. Use “display: none” to make the standard checkbox invisible. This property is used to conceal and reveal entities without removing and replacing them. Although it’s still present within the source code, the associated element captures no gap.

Now, we have a clickable area as displayed on the output screen.

The “inner button” must now be built upon completion of the “external shell”. We will now utilize the “span” element to create the slider. It’s being used to layout objects via clustering them together. If you intend to highlight a certain sentence or piece of material, you may style it by wrapping it in a span element, giving it a class label, and then picking this with the feature values. Assign it absolute, top, and left placements to put it about the label component. Provide this “span” element with the “width” and “height” you have set for the label element. We’ll make a circular slider handle now by utilizing the pseudo-class. This class with the content attribute is commonly exercised to add stylistic material to an element.

Once we execute the aforementioned code, a round slider is generated on the switch.

With both the “outside box” and the “inner button” in place, all that remains will be to handle the switching. We can also include our “transition” attribute which will cause the circle to move from right to left when clicked. The “transform:translateX(n);”, the property is responsible for the actual movement: that will shift the pseudo-element a specified amount of pixels alongside the x-axis. We have used a fresh identifier for the “::before” pseudo-element and the “transition” attribute to the current slider identifier. The “::before” attribute generates the first child of the target element as a pseudo-element. To accommodate the transition from left to right, we just have included the “translateX” attribute to the novel pseudo-element.

In the final output, we have come up with a working toggle button.

Adding Text on Toggle Button:

As in the preceding illustration, we made a simple toggle button with no text. To add text to the toggle button, we simply insert an additional HTML Component within it and design it with a stylesheet to create it appear as a label.

We will utilize the pseudo-class to construct labels that display ON or OFF text based on the toggle button’s status. We may use the data property to include arbitrary data attributes on HTML elements. For the OFF mode, we will fix the opacity to 0, and for the ON mode; we will adjust it to 1. The opacity attribute in CSS is utilized to indicate an object’s visibility. In a nutshell, it describes the image’s clarity.

The code above will turn the toggle button’s text ON and OFF.

Toggle button when clicked ON:

Toggle button when clicked OFF:

Toggle Button with Border:

We can also add borders to the toggle button that we have just created above with the text. In the code snippet below we have set all the necessary elements for generating and displaying the border for the toggle button container as well as for the inner round ball. Apart from that, we also have to put the color of the border. In our example, we have set it to #2196F3 which is a hexadecimal color code for applying the cyan-blue color.

You can see the borders appeared in the resultant toggle button.


 

Conclusion:

Learning CSS when striving to become a web developer is a core requirement. In this article, we have discussed the toggle switch CSS. The first part of this snippet contains an introduction to toggle buttons in CSS and then we elaborated with a practical CSS script example of the creation of the toggle switch. We further inserted text on the toggle button. In the last part, we showed you how to add a border to the toggle button. For the implementation of the code examples, we utilized the sublime text editor.

About the author

Aqsa Yasin

I am a self-motivated information technology professional with a passion for writing. I am a technical writer and love to write for all Linux flavors and Windows.