On and off button in html

How to create a “toggle switch” (on/off button) with CSS and html

The following example demonstrates creating a simple toggle switch using plain html and css.

These are really just plain checkboxes under the hood yet designating in a manner closer to a real life by css and HTML. A Toggle Switch Button control is a custom HTML5 input-type checkbox control that allows you to perform a toggle (on/off) action between checked and unchecked states.

It supports different sizes, labels, label positions, and UI customization.

.switch < position: relative; display: inline-block; width: 200px; height: 45px; text-align: left; >.switch input .slider-btn < position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ca222200; -webkit-transition: .4s; transition: .4s; border-radius: 2rem; border: 1px solid #727272; >.slider-btn:before < position: absolute; content: ""; height: 44px; width: 55%; left: 0px; bottom: -1px; background-color: #ff5a01; -webkit-transition: .4s; transition: .4s; border-radius: 2rem; >input:checked + .slider-btn < background-color: #2ab93400; >input:focus + .slider-btn < box-shadow: 0 0 1px #2196F3; >input:checked + .slider-btn:before < -webkit-transform: translateX(91px); -ms-transform: translateX(91px); transform: translateX(91px); >.slider-btn span < position: absolute; top: 50%; transform: translateY(-50%); >.slider-btn span:last-child < right: 12px; >.slider-btn span:first-child

Also Read

CSS and rounded corner example This is the very first CSS rounded corner technique i learned and used.…

How to Use Custom Fonts On Your Website With the help of CSS How To Use Custom Fonts On Your Website With CSS? Let’s do an…

Setting Style/CSS of select options using jQuery This is how i set style (color here) of all of the options…

Источник

How to add the text «on» and «off» to toggle button in Html?

A toggle button is a graphical control element that allows the user to switch between two mutually exclusive options (for example, on or off), represented as «ON» and «OFF». Adding text to a toggle button in HTML can be done using a combination of HTML and CSS. There are several ways to add the text «ON» and «OFF» to a toggle button, including using JavaScript to change the text dynamically based on the state of the button.

Method 1: HTML Labels

To add the text «ON» and «OFF» to a toggle button using HTML Labels, follow these steps:

input type="checkbox" id="toggle-btn">

1. Create two label elements, one for «ON» and one for «OFF». Set the «for» attribute to match the id of the input element:

label for="toggle-btn">ONlabel> label for="toggle-btn">OFFlabel>

style> #toggle-btn  display: none; > label  display: inline-block; width: 50px; height: 30px; background-color: #ccc; border-radius: 15px; text-align: center; line-height: 30px; cursor: pointer; > #toggle-btn:checked + label  background-color: #0f0; > style>

1. Use the adjacent sibling selector (+) to style the label that immediately follows the checked input element.

input type="checkbox" id="toggle-btn"> label for="toggle-btn">ONlabel> label for="toggle-btn">OFFlabel> style> #toggle-btn  display: none; > label  display: inline-block; width: 50px; height: 30px; background-color: #ccc; border-radius: 15px; text-align: center; line-height: 30px; cursor: pointer; > #toggle-btn:checked + label  background-color: #0f0; > style>

This will create a toggle button with the text «ON» and «OFF» that changes color when toggled.

Method 2: CSS pseudo-elements

To add the text «ON» and «OFF» to a toggle button using CSS pseudo-elements, follow these steps:

1. Create a toggle button using HTML and CSS.
2. Add the ::before and ::after pseudo-elements to the toggle button.
3. Set the content property of the ::before and ::after pseudo-elements to the text «ON» and «OFF», respectively.
4. Position the ::before and ::after pseudo-elements using CSS.

DOCTYPE html> html> head> style> .toggle  position: relative; display: inline-block; width: 60px; height: 34px; > .toggle input  display: none; > .toggle-slider  position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 34px; > .toggle-slider::before  position: absolute; content: "ON"; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; transition: .4s; border-radius: 50%; > input:checked + .toggle-slider  background-color: #2196F3; > input:checked + .toggle-slider::before  transform: translateX(26px); content: "OFF"; > style> head> body> label class="toggle"> input type="checkbox"> span class="toggle-slider">span> label> body> html>

• We create a toggle button by wrapping an input element with a label element and adding a span element with the class toggle-slider to act as the slider.
• We hide the input element using display: none; .
• We position the slider using position: absolute; and set its size and shape using width , height , and border-radius .
• We add the ::before and ::after pseudo-elements to the slider and position them using position: absolute; .
• We set the content property of the ::before and ::after pseudo-elements to the text «ON» and «OFF», respectively.
• We change the background-color of the slider when the input element is checked using input:checked + .toggle-slider .
• We use transform: translateX(26px); to move the ::before pseudo-element to the right when the input element is checked.
• We change the content property of the ::before pseudo-element to «OFF» when the input element is checked using content: «OFF»; .

Method 3: JavaScript

To add the text «ON» and «OFF» to a toggle button in HTML using JavaScript, you can use the following steps:

const toggleBtn = document.getElementById("toggle-btn"); toggleBtn.addEventListener("click", function()  // Your code for toggle functionality >);

toggleBtn.addEventListener("click", function()  toggleState = !toggleState; if (toggleState)  toggleBtn.textContent = "ON"; > else  toggleBtn.textContent = "OFF"; > >);

The above code will toggle the text between «ON» and «OFF» each time the button is clicked.

Here is the full code example:

button id="toggle-btn">button> script> const toggleBtn = document.getElementById("toggle-btn"); let toggleState = false; toggleBtn.addEventListener("click", function()  toggleState = !toggleState; if (toggleState)  toggleBtn.textContent = "ON"; > else  toggleBtn.textContent = "OFF"; > >); script>

Источник

ON/OFF Toggle button — step-by-step guide

Now we’ll create a toggle function, which will be triggered on circle click. At the beginning, we are selecting the toggle and text element using querySelector method. Then we’ll change the active status to the opposite of it’s current value, by setting the exclamation mark (“!”) in front of it (!active). If active was true, it will now become false and vice versa. Now, if active is true, we’ll add the active class to toggle element and change “FF” text to “N”. If it’s false, we’ll remove active class from toggle element and set text to “FF”.

function toggle()  let toggle = document.querySelector('.toggle') let text = document.querySelector('.text') active = !active if (active)  toggle.classList.add('active') text.innerHTML = 'N' > else  toggle.classList.remove('active') text.innerHTML = 'FF' > > 

CSS

.text  font-size: 23px; color: #494949; > 

Toggle element will be positioned relative with 40x20px size (twice as wide as circle — which we’ll set later). We’ll set rounded border to dark dray as if toggle is off.
Then we’ll display everything in center using flexbox. Lastly, I’m setting cursor to pointer, because this element is clickable, triggers the on/off button, and I’m adding transition so that toggle is nice and smooth.

.toggle  position: relative; width: 40px; height: 20px; border: 2px solid #494949; border-radius: 20px; display: flex; justify-content: center; align-items: center; cursor: pointer; transition: .3s; > 

Circle will be positioned absolute with left set to zero. This is the off status.We’ll set the width and height to 20 pixels (half width of it’s parent). Now add some border radius and set the background color to dark grey. This color will become green when toggle is clicked. Don’t forget the transition.

.circle  position: absolute; left: 0; width: 20px; height: 20px; border-radius: 20px; background-color: #494949; transition: .3s; > 

Now we’re styling the active class.This class is added to toggle element when active status. We’ll just set the border color to green.

.active  border-color: rgb(85, 227, 180); > 

Now we’ll select the sibling using the plus selector (“+“) and set it’s color to green. We are talking about “N” text here.

.active + .text  color: rgb(85, 227, 180); > 

Lastly, we’ll style the circle when active. We’ll move it to the right side of it’s container by setting the left property to 100% and translate X by -100%. We’ll also change the background color to green and add some transition.

.active .circle  left: 100%; transform: translateX(-100%); transition: .3s; background-color: rgb(85, 227, 180); > 

Источник

Build a on/off switch button using HTML CSS and JavaScript

In this web development project we are goin to create a animated on off switch button using just HTML CSS and JavaScript and also add a delayed stand by effect using setTimeout function and clearTimeout in order to remove this functionality.

Donation!

Hi, if you like my content and you wish to give back you can buy me a Coffee!

Hi, if you like my content and you wish to give back you can buy me a Pizza!

Project overview

• Build a on/off switch button
  • Project setup
  • Create HTML CSS JS files
  • create HTML5 boiler plate
  • Link up CSS and JS
  • Create and style the switch buttons using HTML and CSS
  • Get elements from the DOM using js getElementById and querySelector
  • Add event listeners of click event to the buttons
  • Create addRemoveActive utility function
  • Remove standby status of the switch container using setTimeout()
  • Create timeout function for standby of the switch container

  Useful Links:

  Project setup

  HTML

  CSS

  @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100&display=swap"); * < margin: 0; padding: 0; box-sizing: border-box; >body < font-family: "Poppins", sans-serif; background-color: #2d2d2d; color: #fff; >body h1 < text-align: center; margin: 5rem auto; >.switch-container < position: relative; display: flex; width: 260px; height: 100px; background-color: linear-gradient; margin: auto; border-radius: 50px; background: #0e0e0e; border: 1px solid #222; box-shadow: 0 0 5px 1px #333; >.switch-container.standby < border: 1px solid #2196f3; box-shadow: 0 0 6px 1px #2196f3; >.switch-container button < cursor: pointer; transition: 0.3s ease; font-size: 1.1rem; width: 100%; border-radius: 50px; margin: 0.8rem; background: #151515; color: gray; >.switch-container button#Off.active < background: linear-gradient(90deg, #4f4f4f 30%, #2e2e2e 66%, #151515 100%); color: #b8021d; >.switch-container button#On.active < background: linear-gradient(90deg, #4f4f4f 30%, #2e2e2e 66%, #151515 100%); color: #4c8137; >/*# sourceMappingURL=main.css.map */

  Menu JS

  const OffBtn = document.getElementById("Off"); const OnBtn = document.getElementById("On"); const switchContainer = document.querySelector(".switch-container"); // Switch On OnBtn.onclick = () => < // OffBtn.classList.remove("active"); // OnBtn.classList.add("active"); addRemoveActive(OffBtn, OnBtn); removeStandby(); >; // Switch Off OffBtn.onclick = () => < if (OnBtn.classList.contains("active")) < addRemoveActive(OnBtn, OffBtn); removeStandby(); >else < return; >>; // todo: Remove standby from the switch container function removeStandby() < switchContainer.classList.remove("standby"); if (OffBtn.classList.contains("active")) < startStandby(); >else < switchContainer.classList.remove("standby"); clearTimeout(standby); >> // todo: create timeout for standby let standby; function startStandby() < standby = setTimeout(() =>< switchContainer.classList.add("standby"); OffBtn.classList.remove("active"); >, 5000); > // todo: addRemoveActive utility function function addRemoveActive(remove, add)

  Show and hide the widgets tab

  Sharing means caring:

  Источник