Guide: How to Create On/Off Button using CSS

The most efficient way to control electronic devices such as radios, TVs, music players and even smartphones with voice command features is to use one button. This single button can be used to manage multiple functions, eliminating the need for additional physical buttons.

The button has been transformed for the digital age, becoming more interactive, dynamic and easier to produce.

Create a one-button design using only CSS, based on an existing design from Dribbble.

It’s time to begin.

HTML

Creating a button is easy: just add an anchor tag and a span to an HTML5 section tag. The anchor tag will form the basis of the button, while the span will create an indicator light.

The button appears in its original form.

Basic styling

This article will show you how to get started with Styles.

Apply a dark background of Subtle Pattern to the body document, center the section, and remove the dotted outline on focus and active links.

A new micro-carbon technology has been developed, allowing for a more efficient background image. This technology is now being used to create a background image with a width of 75px and height of 95px, centered in the page with an automatic margin of 150px. Additionally, the active and focus elements have been set to have no outline.

We’re replacing an image with a custom font from Font Awesome for the button’s icon, allowing it to be easily styled and scaled via the style sheet.

Download the font and save its files (eot, woff, ttf and svg) in the fonts folder. Then add code to your stylesheet to define a new font family.

The @font-face rule allows web developers to use the FontAwesome font family in their websites. It specifies the source of the font, as well as its format and style.

The button’s power icon is displayed in Unicode number F011, but it won’t show up correctly unless the custom font family is defined in the button style.

Unicode and HTML are essential for displaying characters in documents. Learn more about how they work together.

The button needs a custom font family defined.

Creating a circular button is easy with the border-radius property. Simply set the value to at least half of the button’s width to achieve a perfect circle.

We can easily customize the icon’s color and add a text shadow to it by using a font in our style sheet.

Creating a bevel effect for the button is a complex task. To start, the background color must be set to rgb (83,87,93). Then, up to four layers of box shadows can be added for the desired effect.

This CSS code creates a button with a font-family of “FontAwesome”, a color of rgb (37,37,37), text-shadow of rgba (250,250,250,0.1), font-size of 32pt, background color of rgb (83,87,93), box shadow of 0px 3px 0px 0px rgb (34,34,34) and rgba (0 , 0 , 0.5) and border radius of 35px.

The button has an outer circle that is styled using the “before” pseudo element, eliminating the need for extra markup.

A CSS style rule was created to give an element a unique look, with a width of 80px, height of 80px, display block, z-index of -2, position absolute, background color rgb (26,27,29), left -5px and top -2px. The rule also included a border radius of 40px and box-shadow 0px 1px 0px 0px rgba (250.250.250,0.1) and inset 0px 1px 2px rgba (0, 0 ,0 ,0.5).

CSS pseudo-elements are a powerful tool for web developers, allowing them to customize the look and feel of their websites. The “before” and “after” pseudo-elements are two of the most commonly used, allowing developers to add content before or after an element without changing the HTML structure.

A small light below the button indicates whether it is On or Off. Red is used to signify that the power is initially Off, and a box shadow effect creates a glowing look.

A red 8x8 pixel square with a white inner shadow and rounded corners has been positioned at the bottom left of the page, 42% from the left edge.

The effect

The button now looks good, but to make it more interactive, we can add effects when it is clicked. This will give the impression that the button is being pressed and held.

To get the desired effect, the first box shadow on the button must be set to zero and slightly lowered. The intensity of the other three shadows should then be adjusted accordingly.

The box-shadow of an active element has four layers, with colors ranging from rgb (34,34,34) to rgba (0, 0, 0.5). The background color is rgb (83,87,93) and the top is 3px.

When the button is clicked, it will stay pressed and the icon will glow to show that the power is on.

We’ll use the target pseudo-class to make the button icon white and add a white text shadow for an eye-catching effect.

Target elements now feature a box-shadow of 0px 0px 0px 0px rgb (34,34,34), 0px 3px 7px 0px rgb (17,17,17), inset 0px 1px 1px 0px rgba (250, 250, 250, .2) and bet 0px -10px 35x 5x rgba (0.0.0.5). The background color is rgb (83.87.93) with a top of 3 px and color #fff; text shadow is set to be at 0 px by 3 px in rgb (250.250.250).

The :target pseudo-class allows you to style elements on a page based on whether they are the target of a linking element. This can be used to create dynamic effects, such as highlighting the current page in a navigation menu.

The button must be accompanied by a circle with a box shadow.

The active element was given a top margin of -5px, a background color of rgb (26, 27, 29), and a box shadow of 0px 1px 0px 0px rgba (250,250,250,0.1) and inset 0px 1px 2px rgba (0, 0, 0, 0.5) before the target element.

The light indicator shifts from red to green to signal that the power is on.

Target elements now have a box-shadow of 0px 1px 0px 0px rgba (250.250.250,0.5) and a background color of rgb (135187.83), with an additional 3px 2px rgba (135.187.83,0.5) shadow for emphasis.

The transition effect will be applied if the process goes smoothly.

The anchor element now has a 350-millisecond transition for its color property and text shadow.

The code above allows for a transition of color and text shadow to occur in 350 milliseconds across all major browsers.

The light indicator now has a transition for the background-color and box-shadow properties.

The CSS code “target + span” transitions the background color in 350 milliseconds and the box shadow in 700 milliseconds for all browsers.

Final Result

You can now get the final result live and download the source file, bringing your project to completion.

Bonus: How to shut it down

The button can only be clicked once to turn it on, but how can it be turned off? Here’s the bonus: a solution.

Unfortunately, we must use jQuery, but it is straightforward. Here is the necessary code.

When a user clicks on the button, it will toggle between an “on” and “off” state, thanks to CSS3.

When the #button is clicked, jQuery’s toggleClass function adds or removes the ON class from the anchor.

The jQuery library must not be overlooked, experts caution.

The .on class selector should be used to replace target pseudo-elements.

A dark-colored link with a light-colored text shadow and a drop shadow when active is given a green highlight when hovered over.

Testing complete, users can now experience the product in their web browsers.

How to Create On/Off Button using CSS: benefits

Faq

Final note

We’ve created a guide to help you create an On/Off button using CSS. If you have any questions, please reach out to us. Show your support by sharing the article with your friends.

Visitors with questions about creating an on/off button using CSS can contact us through the comment section or directly. This guide is for educational purposes only. To correct any misinformation or add more methods, please contact us. For help, use our contact page or follow us on Whatsapp, Facebook and Twitter. We answer questions within 24-48 hours (weekends excluded). For software updates and discussion, join our Telegram channel.