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

Answer 1

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>

Answer 2

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

Answer 3

Try adding this:

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