Project / Support Center
Welcome, Guest. Please login or register. December 01, 2020, 07:09: PM
Home Help Search Login Register
D-Web Web Site Creator D - Web Web Site Creator On-line HTML Editor No Programming knowledge required. Web Global Net PayPal-Cart Shopping Cart System PayPal - Kart Shopping Cart System for E-Commerce over the internet, that's easy to use. Web Global Net Newsletter Manager Newsletter Manager On-line Newsletter Creator with Email Subscriber Management.
Ring Central Discount
Web Global Net Web Application & Web Development Project Center  |  Technical Issues  |  CSS Related  |  Topic: Cool Slider Checkbox 0 Members and 1 Guest are viewing this topic. « previous next »
Pages: [1] Go Down Send this topic Print
Author Topic: Cool Slider Checkbox  (Read 5897 times)
admin
Administrator
******
Offline Offline

Posts: 208


« on: February 15, 2017, 05:34: PM »

Change the name .agree_terms to what ever your checkbox field name is

/* CSS .agree_terms */
.agree_terms {
  width: 90px;
  height: 26px;
  background: #333;
  margin: 20px auto;
  position: relative;
  border-radius: 50px;
  box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);
}
.agree_terms:after {
   content: 'NO';
   color: #F6F8F6;
   position: absolute;
   right: 15px;
   z-index: 0;
   font: 12px/26px Arial, sans-serif;
   font-weight: bold;
   text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.15);
}
.agree_terms:before {
  content: 'Agree';
  color: #4FF453;
  position: absolute;
  left: 5px;
  z-index: 0;
  font: 12px/24px Arial, sans-serif;
  font-weight: bold;
}
.agree_terms label {
   content: 'Click';
   display: block;
   width: 40px;
   height: 10px;
   cursor: pointer;
   position: absolute;
   top: 3px;
   left: 3px;
   z-index: 1;
   background: #fcfff4;
   background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
   background: linear-gradient(to bottom, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
   border-radius: 50px;
   -webkit-transition: all 0.4s ease;
   transition: all 0.4s ease;
   box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);
   color: rgba(0,0,0,1.00);
}
.agree_terms input[type=checkbox] {
  visibility: hidden;
}
.agree_terms input[type=checkbox]:checked + label {
  left: 43px;
}

/* end .agree_terms CSS */

<!-- .agree_terms HTML -->

   <section title=".agree_terms">
    <!-- .agree_terms -->
    <div class="agree_terms"> 
      <input type="checkbox" value="1" id="agree_terms" form="form1" name="check" checked />
      <label for="agree_terms"></label>
    </div>
    <!-- end .agree_terms -->
</section>

    <!-- end .agree_terms HTML -->

found at https://codepen.io/bbodine1/pen/novBm
« Last Edit: February 15, 2017, 05:38: PM by admin » Report to moderator   Logged

The Unknown Webmaster
Pages: [1] Go Up Send this topic Print 
Web Global Net Web Application & Web Development Project Center  |  Technical Issues  |  CSS Related  |  Topic: Cool Slider Checkbox « previous next »
Jump to:  


Login with username, password and session length
Powered by MySQL Powered by PHP Powered by SMF 1.1.19 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!