Toggle button using CSS

Question

I designed a horizontal toggle button and I am trying to make it vertical with vertical transition.

You can look for my CSS demo at Horizontal Toggle button CSS Code Demo Can someone point me what needs to be done to make it vertical? I am new to CSS and HTML

Refer to my code at jsfiddle

hi I have posted the answer below check the given links

Deepak Sharma
– Deepak Sharma

2014-02-20 04:16:51 +00:00
Commented Feb 20, 2014 at 4:16 — Deepak Sharma
– Deepak Sharma, Commented Feb 20, 2014 at 4:16

Deepak Sharma · Accepted Answer · 2014-02-20 04:15:58Z

6

replace your css with the follwing ..

http://jsfiddle.net/ZX6hF/8/

or

http://jsfiddle.net/ZX6hF/9/

html{ height:100%; }
body{
  font:14px/1 Arial; 
  text-align:center;
  color:#333; 
  background-color:#EEE; 
  height:100%; 
  background:#DDD; 
}
body::after{ content:''; display:inline-block; height:100%; vertical-align:middle; }

*{ margin:0; padding:0; }

            ul{ margin:0; padding:0; list-style:none; display:inline-block; width:300px; text-align:left; vertical-align:middle; }
                ul li{ line-height:30px; overflow:hidden; padding:4px 0; }

/* Actual code goes here */
      .togglebox input{ display:none; }
            .togglebox{ display:inline-block; border:1px solid #BBB; width:40px; height:90px; position:relative; border-radius:20px; color:#FFF; font-weight:bold; overflow:hidden; box-shadow:0 1px 0 #CCC; }
            .togglebox label{ width:40px; height:100%; line-height:200%; border-radius:0.4em; position:absolute; top:0; left:0; z-index:1; font-size:1.1em; cursor:pointer; -webkit-transition:height 0.12s; -moz-transition:height 0.12s; transition:height 0.12s; }
            .togglebox span{ position:absolute; top:-110px; }

            .togglebox label::before{ content:'ON'; width:40px; height:50px; float:left; margin-top:00px; padding-top:20px; padding-right:13px; text-align:center; background:#13E27F; text-shadow:0 -1px 0px #093B5C; box-shadow:0 4px 5px -2px rgba(0,0,0,0.3) inset; }

            .togglebox label b{ display:block; height:40px; width:40px; float:left; position:relative; z-index:1; border:1px solid #AAA; background:#F6F6F6; box-shadow:0 4px 0 -2px #F1F1F1 inset, 0 2em 2em -2em #AAA inset, 0 0 2px rgba(0,0,0,.5); border-radius:20px; margin-top:-20px; margin-left:-1px; }
            .togglebox label:hover b{ background:#E5E5E5; }
                .togglebox label::after{ content:'OFF'; width:40px; float:left;height:50px; padding-top:20px; padding-left:0px; text-align:center; background:#E70A25; box-shadow:0 4px 5px -2px rgba(0,0,0,0.3) inset; margin-top:-20px;}
            .togglebox input:checked ~ label{ top:-50px; }

check the sample Here ..!!! click

edited Feb 20, 2014 at 4:15

answered Feb 20, 2014 at 4:10

Deepak Sharma

4,1801 gold badge17 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Matej Chrenko Over a year ago

isn`t it upside down?

Deepak Sharma Over a year ago

if you want upside down check this one http://jsfiddle.net/ZX6hF/9/

Cthutu Over a year ago

It's not upside down if you live in the UK :)

Matt Smith · Accepted Answer · 2014-02-20 03:52:38Z

1

Try adding this:

#togglebox {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

answered Feb 20, 2014 at 3:52

Matt Smith

2,1781 gold badge23 silver badges47 bronze badges

Comments

Devang Hire · Accepted Answer · 2021-09-17 12:40:49Z

TRY IT https://jsfiddle.net/DEVANGHIRE/0a9mnrfv/1/

 .toggleSwitchForPublishZone {
    display: inline-block;
    height: 18px;
    position: relative;
    overflow: visible;
    padding: 0;
    /*margin-left: 50px;*/
    cursor: pointer;
    width: 40px
}

.toggleSwitchForPublishZone * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
 }

 .toggleSwitchForPublishZone label,
 .toggleSwitchForPublishZone>span {
    line-height: 20px;
    height: 20px;
    vertical-align: middle;
  }

  .toggleSwitchForPublishZone input:focus~a,
  .toggleSwitchForPublishZone input:focus+label {
      outline: none;
  }

.toggleSwitchForPublishZone label {
    position: relative;
    z-index: 3;
    display: block;
    width: 100%;
 }

 .toggleSwitchForPublishZone input {
    position: absolute;
    opacity: 0;
    z-index: 5;
  }

 .toggleSwitchForPublishZone>span {
    position: absolute;
    left: -50px;
    width: 100%;
    margin: 0;
    padding-right: 50px;
    text-align: left;
    white-space: nowrap;
  }

  .toggleSwitchForPublishZone>span span {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    display: block;
    width: 50%;
    margin-left: 50px;
    text-align: left;
    font-size: 0.9em;
    width: 100%;
    left: 15%;
    top: -1px;
    opacity: 0;
  }

 .toggleSwitchForPublishZone a {
    position: absolute;
    right: 50%;
    z-index: 4;
    display: block;
    height: 100%;
    padding: 0;
    left: 2px;
    width: 18px;
    background-color: #fff;
    border: 1px solid #CCC;
    border-radius: 100%;
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  }

  .toggleSwitchForPublishZone>span span:first-of-type {
    color: #ccc;
    opacity: 1;
    left: 56%;
  }

.toggleSwitchForPublishZone>span:before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 51px;
    top: -2px;
    background-color: #fafafa;
    border: 1px solid #ccc;
    border-radius: 30px;
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
  }

 .toggleSwitchForPublishZone input:checked~a {
    border-color: #fff;
    left: 100%;
    margin-left: -8px;
  }

  .toggleSwitchForPublishZone input:checked~span:before {
     border-color: #00A08B;
     box-shadow: inset 0 0 0 30px #00A08B;
    }

   .toggleSwitchForPublishZone input:checked~span span:first-of-type {
        opacity: 0;
   }

   .toggleSwitchForPublishZone input:checked~span span:last-of-type {
       opacity: 1;
      color: #fff;
    }


  .toggleSwitchForPublishZone.large1 {
       width: 60px;
       height: 25px;
   }

   .toggleSwitchForPublishZone.large1 a {
      width: 27px;
      top:1%;
   }

  .toggleSwitchForPublishZone.large1>span {
    height: 29px;
    line-height: 28px;
    }

  .toggleSwitchForPublishZone.large1 input:checked~a {
    left: 41px;
    top:1%;
   }

   .toggleSwitchForPublishZone.large1>span span {
     font-size: 11px;
   }


    <label class="toggleSwitchForPublishZone large1">&nbsp;
    <input type="checkbox" name="FlgInstanceRelease" id="ChangeStatus1" checked 
    data-status="1" />
    <span>
            <span>No</span>
            <span>Yes</span>
    </span>
    <a></a>
  </label>

Collectives™ on Stack Overflow

Toggle button using CSS

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related