CSS switch toggle with labels that transition smoothly

I stumbled upon this codepen showcasing a CSS-only toggle switch.

After attempting to modify the colors to have a white background and black font when checked, and a black background and white font when unchecked, I've run into difficulties recreating the smooth transition animation achieved by the original author. Despite my efforts to adjust the code here to accommodate the inverted colors, the transition remains ineffective.

I suspect the issue lies within this section of the SCSS, but my attempts at resolving it have been unsuccessful.

& + label {
  cursor: pointer;

  &:hover {
    background: black;
    color: white;
  }

  &:after {
    background-color: none;
    content: "";
    height: 100%;
    position: absolute;
    top: 0;
    transition: left 200ms cubic-bezier(0.77, 0, 0.175, 1);
    width: 100%;
    z-index: -1;
  }
}

Any assistance on this matter is highly valued. Additionally, suggestions on an alternative CSS-only method to achieve the desired toggle switch with the specified colors are also welcomed.

htmlcsscss-transitions

Answer №1

Check out the updated version of the switch with inverted colors and some minor tweaks.

The original toggle button didn't have a default background color, causing the page background to show through. Now, the button is wrapped with a default background-color for better visibility. Additionally, left/right classes have been added to the buttons to eliminate the middle line (i.e., borders). Overall, the HTML structure could be more streamlined.

For more details, visit: https://codepen.io/anon/pen/YOXwRY

Here's the HTML snippet:

<div class="btn_wrapper">
    <input id="toggle-on" class="toggle toggle-left" name="toggle" value="false" type="radio" checked>
    <label for="toggle-on" class="btn btn_left">Yes</label>

    <input id="toggle-off" class="toggle toggle-right" name="toggle" value="true" type="radio">
    <label for="toggle-off" class="btn btn_right">No</label>
</div>

And here's the CSS snippet:

body,html{
    background: #efefef;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100%;
    z-index: -1;
}

.btn_wrapper {
    background: #000000;
    color: #ffffff;
    z-index: inherit;
}

.btn{
    border: 3px solid #1a1a1a;
    display: inline-block;
    padding: 10px;
    position: relative;
    text-align: center;
    transition: background 600ms ease, color 600ms ease;
}

.btn_left {
    border-right: 0px;
}

.btn_right {
    border-left: 0px;
}

/* CSS continues as originally presented */

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Different ways to update the AutoComplete Style attribute

MuiInput-formControl { margin-top: 16px; Is there a way to reset the marginTop property to zero? I attempted the following method, but it was not successful. MuiFormControlLabel: { marginTop: 0, }, <Autocomplete disabl ...

csstypescriptmaterial-uiautocompletestyles

Is there a way to update a portion of a webpage to show different content after a form is successfully submitted?

I have implemented a newsletter subscription form on my web app, utilizing Mailchimp to manage the list of subscribers. The process is running smoothly with the Mailchimp API seamlessly adding subscribers from my site to the audience list on Mailchimp. Th ...

c#htmlasp.net-corerazor-pages

Tips for transferring simple CSS formatting to an independent stylesheet

As part of a university project, I am working on a basic website. Initially, I used in-line styling for the website design. However, the subject coordinator has now changed the requirements and we are only allowed to use an external CSS stylesheet. Most of ...

htmlcss

Issues with Angular ngroute: controllers are not functioning properly

In order to route my application with different themes on the same page, I plan to utilize the ngroute module. Here's an example of how I intend to achieve this: <html> <head> <title>Angular JS Views</title> ...

javascripthtmlangularjsngrouteroute-provider

Unveiling the Magic: Enhancing Raphaeljs with Interactive Click Events on a Delicious Slice of the

I'm having trouble responding to a click event on each slice of a Raphael Pie Chart. I've tried implementing the code below, but it doesn't seem to be working. The code is just two lines, commented as "My Code", in the example from the offic ...

javascriptjquerycsssvg

Learn how to use AJAX to send a post request to PHP and dynamically load content into a specific

Recently, I have been working on developing a filter function using ajax and PHP. Although I am still quite new to ajax, I was able to create an HTML input that looks like this: <form> <input type="text" placeholder="Search" ...

phphtmljqueryajax

A step-by-step guide on utilizing img src to navigate and upload images

I would like to hide the input type='file' element with id "imgInp" that accepts image files from users. Instead, I want them to use an img tag to select images when they click on a specific img tag. How can this be achieved using jQuery? Here i ...

javascriptjquerycsshtml

Unveiling the Quirk of Foundation 5: Grid Encounters a Popping

Recently, I encountered an issue with Foundation 5. Whenever I attempt to apply the "position:fixed" property on a "div" element that is part of the Foundation Grid, it causes the div to break out of the grid and align itself with the left edge of the ro ...

csszurb-foundation

Stopping CSS animations at a specific point along the path without using timing functions can be achieved by implementing a targeted

Is there a way to pause an animation at the 50% mark for 2 seconds and then resume? P.S. The setInterval method is not recommended! function pauseAnimation() { document.getElementById("0").style.animationPlayState = "paused"; }; var pauseInterval = set ...

javascripthtmlcsscss-animationskeyframe

Utilize jQuery to dynamically update the box-shadow property with inset added

I have a situation similar to this: $('.inset').click(function(){ if($('.inset').is(':checked')){ $('.box-shadow').css('boxShadow','inset'); }else{ $('.box-shadow&ap ...

jqueryhtmlcss

The ng-repeat function is unable to fetch data from a JSON file

Within my AngularJS framework template, I have the following snippet of html code: <ul class="sb-parentlist"> <h1 class={{headerClass}}> Popular</h1><div data-ng-repeat="data in data track by $index"> <li> ...

htmlangularjsjsonangularjs-ng-repeat

Tips for displaying Ajax response in a modal popup

I have a link that, when clicked, sends an AJAX request and successfully receives a response in the form of an HTML file, which I then append to a div. However, I want to display this div as a modal popup and I have attempted the following: In the HTML fi ...

javascriptjavajqueryhtmlajax

The design breaks occur exclusively in the Android default browser

I am experiencing issues with the design of a nested div element when viewed in the default Android browser. Unfortunately, I don't have access to tools that would allow me to identify the cause of this problem. However, the design functions correctly ...

jqueryhtmlcsscross-browser

Preventing Event Propagation in Angular HTML

I am encountering an issue with stopPropagation, and I need assistance with implementing it in HTML and TypeScript for Angular. The problem is that the dialog opens but also triggers a propagation. Below is my code snippet in HTML: <label for="tab-two ...

htmlangulartypescript

Learn how to utilize AngularJS to create dropdown menus within data cells of an HTML table

I am working on populating rows in an HTML table based on the response I get from AngularJS. My goal is to have one of the table data cells formatted as a dropdown menu. Specific Requirements: The dropdown menu should include three values (A, B, and C). ...

htmlangularjs

Guide on how to load just the content section upon clicking the submit button

Here is an example of my code: <html> <head> <title>Test Loading</title> </head> <body> <div id="header"> This is header </div> <div id="navigation" ...

javascriptphpjqueryhtmlajax

Tips for converting numerical values to visual elements in a JQUERY slider for images

I am looking to incorporate a similar image slider on my website, like the one showcased here: . However, I want the bottom content numbers to be replaced with smaller versions of the images in the slider instead. Does anyone have any suggestions on how I ...

jqueryhtmlcss

django was unable to interpret the remainder: 'css/materialize.min.css' from 'css/materialize.min.css'

In following a tutorial, I am adding a chat bot UI that is embedded in Django. The file structure looks like this: . ├── db.sqlite3 ├── installDjango.sh ├── manage.py ├── rasadjango │ ├── asgi.py │ ├── __init__.p ...

cssdjango

How can you assign a strokeStyle color to a Canvas using a CSS property?

Our team is currently working on an Angular2 / Ionic 2 project where we have implemented a HTML Canvas element that allows users to draw on it. One challenge we are facing is how to set the Canvas strokeStyle property using a color provided by a CSS style. ...

javascripthtmlcssangularcanvas

Creating multiple rectangles and filling them with a color chosen by the user in Angular can be achieved by following these steps

Looking for advice on angular coding. I'm working on a project that requires creating multiple rectangles and filling them based on selected values. Can anyone suggest a module that would offer this functionality? ...

htmlangularangular6