`CSS Toggle Smooth Transition Effect`

I am working on creating 2 CSS toggle buttons that currently have a fade in and out effect when clicked. I would like them to have a sliding animation from right to left instead. Below is the HTML, CSS, and a link to a fiddle containing my code. Thank you! https://jsfiddle.net/ebgpqvha/

<div class="switch-field">
  <div class="switch-title">Hand:</div>
  <input type="radio" id="switch_left" name="switch_2" value="yes" checked/>
  <label for="switch_left">L</label>
  <input type="radio" id="switch_right" name="switch_2" value="no" />
  <label for="switch_right">R</label>
</div>


       .switch-field, .switch-field2 {
      font-family: "adiHaus", Arial, sans-serif;
      font-size: 16px;
        font-weight: 300;
        margin: 0.2em;
        overflow: hidden;
    }       


    .switch-title {
      margin-bottom: 6px;
    }       

    .switch-field input, .switch-field2 input {
      display: none;
    }       


    .switch-field label, .switch-field2 label {
      float: left;
    }       


    .switch-field label {
      display: inline-block;
      width: 63px;
      height: 40px;
      background-color: #EFEFEF;
      color: #cdcdcd;
      font: 16px "adiHaus",Arial,sans-serif;
      font-weight: bold;
      text-align: center;
      text-shadow: none;
      padding: 10px 14px;
      border: 1px solid rgba(0, 0, 0, 0.2);
     border-top: #CCC solid 1px;
     border-radius: 2px;
        border-bottom: #EEE solid 1px;
        border-right: #ddd solid 1px;
        border-left: #ddd solid 1px;
      -webkit-transition: all 600ms cubic-bezier(0.165, 0.84, 0.44, 1);
      transition:         all 600ms cubic-bezier(0.165, 0.84, 0.44, 1);
    }       

    .switch-field2 label {
      display: inline-block;
      width: 113px;
      height: 40px;
      background-color: #EFEFEF;
      color: #cdcdcd;
      font: 16px "adiHaus",Arial,sans-serif;
      font-weight: bold;
      text-align: center;
      text-shadow: none;
      padding: 10px 14px;
      border: 1px solid rgba(0, 0, 0, 0.2);
     border-top: #CCC solid 1px;
     border-radius: 2px;
        border-bottom: #EEE solid 1px;
        border-right: #ddd solid 1px;
        border-left: #ddd solid 1px;
     -webkit-transition: all 600ms cubic-bezier(0.165, 0.84, 0.44, 1);
      transition:         all 600ms cubic-bezier(0.165, 0.84, 0.44, 1);
    }       

    .switch-field label:hover, .switch-field2 label:hover {
      cursor: pointer;
    }       

    .switch-field input:checked + label, .switch-field2 input:checked + label {
      background-color: #fff;
      -webkit-box-shadow: none;
      box-shadow: none;
      color:000;
      font-weight: bold;
    }       

    .switch-field label:first-of-type, .switch-field2 label:first-of-type {
    border-right: none;
    }       

    .switch-field label:last-of-type, .switch-field2 label:last-of-type {
    border-left: none;
    }
htmlcssanimationtoggleslide

Answer №1

If you're looking for a CSS library to add toggle animations, check out MoreToggles.css. This library offers various styles with sliding from right to left animation options.

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/JNKKKK/MoreToggles.css/output/moretoggles.min.css">
</head>

<div class="mt-ios"> 
  <input id="1" type="checkbox" />
  <label for="1"></label>
</div>

Answer №2

Using two checkboxes for this task may not be the most efficient approach. It could lead to a cluttered and messy layout. Instead, consider adding a field in your table labeled "Right Handed" with options for yes or no.

To create the checkbox:

I have enclosed it within a table to position LH and RH on either side.

.tgl {
  display: none;
}
* {
  box-sizing: border-box;
}
.tgl + .tgl-btn {
  outline: 0;
  display: block;
  width: 4em;
  height: 2em;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background: #3f9ddd;
  border-radius: 2em;
  padding: 2px;
  -webkit-transition: all .4s ease;
  transition: all .4s ease;
}
.tgl + .tgl-btn:after,
.tgl + .tgl-btn:before {
  position: relative;
  display: block;
  content: "";
  width: 50%;
  height: 100%;
}
.tgl + .tgl-btn:after {
  left: 0;
  border-radius: 50%;
  background: #fff;
  -webkit-transition: all .2s ease;
  transition: all .2s ease;
}
.tgl + .tgl-btn:before {
  display: none;
}
.tgl:checked + .tgl-btn:after {
  left: 50%;
}
.tgl:checked + .tgl-btn {
  background: #2ecc71;
}
<table>
  <tr>
    <td colspan="3">Hand</td>
  </tr>
  <tr>
    <td>LH</td>
    <td>
      <input class="tgl" id="cb1" type="checkbox">
      <label class="tgl-btn" for="cb1"></label>
    </td>
    <td>RH</td>
  </tr>
</table>

The checkbox will be checked if the person is Right Handed.

This method does not require JavaScript as the CSS styling is based on the checkbox being checked or unchecked using the :checked prefix.

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

Issues arise with the functionality of custom jQuery sliders

I'm attempting to create a bootstrap panel slider using my own jQuery code, but it's not functioning as anticipated. My Objective: I have two links for "previous" and "next", and three panels with distinct headings. When the "previous" link is ...

javascriptjqueryhtmlcsstwitter-bootstrap

Styling a playbook using CSS Grid management techniques

Exciting to create a playbook layout style, here's how it goes: Name: Text starting here - unique style #1 text that moves to a new line with a different look - unique style #2 more text continuing on another new line ...

htmlcssflexbox

Image Handpicked by JCrop User

Successfully implemented JCrop example code for selecting an area on an image with a preview and getting coordinates. However, the challenge lies in allowing users to select an image from their file system, display it in the browser, and perform the afore ...

javascriptjqueryhtmlimagejcrop

Scroll along the menu smoothly, without causing any disruptions to the rest of the page

I have a piece of code that works, but not exactly as I want it to. What I would like is to create a menu bar where, upon hovering over an item, the options slide out from underneath, without pushing the other menu items down. If this description isn&apos ...

jqueryhtmlcssinterfacemenu

Adjust the width of a div element to a specific size, center the div horizontally, and justify

My issue may be small, but I am struggling to find a solution. I have a content header that is 864px wide with a background image repeated vertically and a footer image. I now have a <div> positioned over the background image and I want it to be 855p ...

htmlcss

Tips for creating a scrollable modal with a form embedded within

Is there a way to enable scrolling in a modal that contains a form? <div class="modal fade" id="assignModal" data-coreui-backdrop="static" data-coreui-keyboard="false" aria-labelledby="staticBackdropLabel&q ...

htmlbootstrap-4

What steps can I take to troubleshoot and repair my accordion feature within an Angular project?

As a newcomer to Angular, I recently attempted to create an accordion component but encountered unexpected behavior. Here is the HTML code for my attempt: <div class="faq-item-container"> <h1 class="mt-1 mb-5"><strong>Frequently A ...

htmlcssangulartypescript

Hovering over one element in Jquery triggers actions on multiple elements simultaneously

I'm working on a project where I have multiple cards, and I've implemented a hover effect using jQuery to make the images inside the cards bigger. However, I'm facing an issue where hovering over one card triggers the effect on all the other ...

htmljquerycsscss-transitions

jQuery failing to recognize multiple selection form elements

<select class="js-example-basic-multiple categories form-control" name="categories[]" style="width: 100%" multiple="multiple"> <option value=""></option> <option value="fresher">fresher</option> <option value=" ...

phpjqueryhtmllaravel-5.4

Issues arise when trying to use jQuery within an AJAX-loaded div on the same page

I have been struggling with this issue for days and have tried looking up solutions online, but haven't had any luck. I attempted changing a '.live' to '.click' in the code, but that didn't work either. In the jquery.ajaxy.js ...

jqueryajaxhtmlload

Is there a way for me to detect if the user has manipulated the CSS or JavaScript in order to alter the look of my website?

Is there a way to determine if someone is utilizing script or CSS extension tools? For instance, if they have adjusted alignments, applied display: none; to multiple elements, or utilized jQuery's .hasClass to manipulate divs. ...

javascriptjquerycssgoogle-chrome-extension

Customizing CSS float labels for individual inputs

For my project, I've implemented CSS code to create a floating label effect for form inputs. If you need the original code reference, it can be accessed here. However, since there are multiple examples in the original codebase, I have extracted and m ...

csscss-animations

Trouble encountered with bootstrap toggling when multiple identical inputs are used

Problem with Bootstrap toggle not working on multiple identical inputs unless the first input is pressed. Even then, not all inputs are checked/unchecked. I've created a small example I want to ensure that when one input is toggled, all others have ...

javascriptjqueryhtmltwitter-bootstrap-3

Items in a CSS masonry container with a 'column count' feature showcasing drop shadows that elegantly span across multiple lines

I've been experimenting with CSS column count to create a masonry effect for my items. Everything was going smoothly until I added a subtle drop shadow to the items. Upon closer inspection in the jsfiddle link provided, you'll notice that the dr ...

cssdatagridtwitter-bootstrap-3

Invoking a nested function within an array

I need to trigger a function with a button click. The function I want to call is nested within another function, which is part of an array. demo = { volej: function(param) { (new initChartist).users(param); }, initPickColor: function(){ ...

javascripthtml

Restrict the amount of decimal places allowed in input text

Another question on Stack Overflow addresses limiting the number of characters allowed in a form input field. I am specifically looking to restrict the number of digits that can come after the decimal point to 2 digits. <input type="text" maxlength="2 ...

htmlformsinput

Can WireMock be used to send an HTML file as a response?

Is it possible to return an HTML file as a response in WireMock and how can this be achieved? ...

javascriptjavahtmlseleniumwiremock

``CSS: Styling a Rounded Div with a Clipped Scrollbar

I am attempting to contain a scrollbar within a div so that it remains within the rounded corners without overflowing. Take a look at the code snippet below to see the problem in action. Is there a way for the scrollbar to be fixed in its position, while ...

htmlcss

Creating a responsive web design with a user-friendly CSS grid layout

Currently, I am delving into the realm of CSS grid to better comprehend its functionality. In my layout design, there are two menus (colored in red) positioned on either side of a central main content box (colored in blue). As the screen size reduces and ...

htmlcssgridgrid-layoutcss-grid

Any recent guide on how to use the flexbox module?

As the Flexible Box Layout module spec continues to evolve, some browsers have implemented multiple versions with varying syntaxes. Despite efforts to find current tutorials, many sources warn of outdated information. In light of potential future changes, ...

cssflexbox