`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

A superior method for implementing CSS keyframe transitions

Currently, I am utilizing the Rico St.Cruz brilliant query.transit library for my work. However, I need to make some changes involving classes instead of CSS transitions. Although I am not very confident in CSS transitions, I attempted to replace: JS: $ ...

javascriptjqueryhtmlcss

CSS - borders are overlapping with one another

Encountering an issue where the bottom border is overlapping the right border on the same element. Here's a visual representation of the problem: The green right border's bottom is appearing distorted due to the presence of the gray border at t ...

htmlcss

Easily validate your email with this straightforward form. Completely puzzled

Today's challenge is tackling the email validation form issue. While searching for a solution, I stumbled upon an interesting code snippet: http://jsfiddle.net/jquery4u/5rPmV/ dyingOverHere(); The code seems to work flawlessly in the demo provided. ...

jqueryhtmlvalidation

The contenteditable div's selectAll feature doesn't function properly when it gains focus

I'm working with divs in a table structure and here's an example: <div contenteditable="true" onfocus="document.execCommand('selectAll',false,null)">Something</div> Clicking on a div to focus works perfectly, selectin ...

javascriptjqueryhtmlcss

"Is there a way to target an element within another element that has inline styles using

What is the best CSS strategy for targeting elements with inline styles? How can I focus on the first span but exclude the second using only CSS? If that's not achievable, is it possible to accomplish this using jQuery? http://jsfiddle.net/TYCNE/ & ...

htmlcsscss-selectorsinline-styles

Tips for positioning a label at the top of a table row in an asp.net C# application

I am facing an alignment issue in my asp.net page with a table that contains a label and a textbox. Despite trying various methods, the label consistently displays at the bottom of the row. How can I ensure that the label is aligned to either the center or ...

c#htmlcssasp.netcode-behind

Alerting JavaScript with element Selector doesn't function at full capacity

I am currently implementing Notify JS from the following source : Below is the HTML code I am using: <div> <p><span class="elem-demo">aaaa</span></p> <script> $(".elem-demo").notify( "Hello Box" ...

javascriptjqueryhtmlnotifyjs

Troubleshooting flow problems in flexbox container for

https://i.stack.imgur.com/ZpVaH.png I have implemented a flexbox-based page layout. The layout consists of two sidebars on the left and right sides, with fixed widths, and a central content panel that dynamically adjusts to fill the remaining space. Howe ...

cssflexbox

NuxtJS - Google Auth: ExpiredAuthSessionError: The authentication session has expired because both the token and refresh token have expired. Please try your request

I've been using nuxtjs for some time now. Everything related to authentication was working smoothly until my last update. However, after updating the nuxt.config.js file and moving the axios plugin from the plugins array to the auth config object, an ...

htmlvue.jsnuxt.jsnuxt-auth

Retrieve the content of a specific HTML tag using JavaScript

Is it possible to extract the content of a specific HTML tag as a string or XML format? <body> <script src="jquery.min.js"> //var test = document.getElementsByTagName("input"); //alert(test[0]); $(document).ready(function ( ...

javascriptjqueryhtml

Adjusting table font dynamically using Angular and CSS

I am currently working on an Angular project and facing a challenge with setting the font size dynamically in a table. I have created a function to address this issue, which includes the following code snippet: $('.td').css({ 'font-size ...

cssangular

What HTML5 form JavaScript polyfill offers the most extensive functionality and compatibility across different browsers?

The improved attributes and tags introduced in HTML5 are quite beneficial. Unfortunately, support for these features is limited in Chrome and Firefox, with virtually no support in IE9 and earlier versions. After researching, I have come across Modernizr a ...

htmlformspolyfillswebshim

Looking to capture a specific div in a React JS component? I initially tried using the "use-screenshot-hook" package, but unfortunately, it captured the entire page instead

const reference = useRef(null); const { capturedImage, takeScreenshot } = useScreenshot(); const imageStyle = { height: imgHeight, width: imgWidth }; const fetchImage = () => takeScreenshot({reference}); const saveImage = () => ...

htmlreactjs

Guide to showing video files stored in a folder on a PHP template

I am working on a project similar to the functionality of this website: As you can see, when you click on any video, it takes you to the same page with the video playing being the only difference. I want to implement this feature on my website as well. ...

phphtmlget

Displaying a loading screen while a jQuery ajax request is in progress

Currently, I am attempting to display a loading div while waiting for an ajax call to finish. Despite experimenting with various methods, I have not been able to consistently achieve the desired outcome. In my present code, everything functions properly o ...

javascriptjqueryhtmlcssajax

Experiencing challenges with showcasing numerical values in the grid cells

My latest project involves creating an interactive sudoku solver. I've successfully created a grid made up of various elements to resemble an empty sudoku grid. However, my challenge lies in getting the numbers to display within the grid cells. Click ...

javascripthtmljquerycss

The issue of JQuery mobile customizing horizontal radio buttons failing to function on physical devices has been identified

Not long ago, I posed a query on Stackoverflow regarding the customization of horizontal jQuery-mobile radio buttons. You can find the original post by following this link How to customize horizontal jQuery-mobile radio buttons. A developer promptly respon ...

javascriptjquerycssjquery-mobilejquery-mobile-radio

I am experiencing an issue where the Flex table is not displaying more than 50 rows

I am experiencing an issue where I can't scroll back up with the scrollbar. The table is dynamically filled with data from a database, and when it gets too long, I am unable to scroll back up. Any suggestions on how to solve this problem? If you need ...

htmlcss

Why isn't Sequence.js Slider automatically playing?

Issue: The sequence.js slider I implemented is not animating. Despite adding the following options: animateCanvas: true, fadeStepWhenSkipped: false, autoPlay: true, autoPlayInterval, 2000 It still does not work. Is there something essential t ...

javascriptjquerycsshtmlslider

Display or conceal content based on checkbox status

i am trying to create a system where content is hidden by default and only displayed when a checkbox is checked. The goal is to show the content when the checkbox is checked and hide it when unchecked, so that other content can be shown as well upon checki ...

htmlcss