Web designing _ Examples

Web designing _ Examples

Alert Buttons
Outline Buttons
Animated Buttons
Nav bar~1
Nav bar~2
Tabs~1
Tabs~2
Accordion~1
Accordion~2
Loading Animation~1
Loading Animation~2
Loading Animation~3
Toggle Animation~1
Toggle Animation~2
Toggle Animation~3
Calculator

<style>
 body {
 font-family: Arial, Helvetica, sans-serif;
 }
 
 .navbar {
 overflow: hidden;
 background-color: black;
 }
 
 .navbar a {
 float: left;
 font-size: 16px;
 color: white;
 text-align: center;
 padding: 14px 16px;
 text-decoration: none;
 }
 
 .dropdown {
 float: left;
 overflow: hidden;
 }
 
 .dropdown .dropbtn {
 font-size: 16px;  
 border: none;
 outline: none;
 color: white;
 padding: 14px 16px;
 background-color: inherit;
 font-family: inherit;
 margin: 0;
 }
 
 .navbar a:hover, .dropdown:hover .dropbtn {
 background-color: purple;
 }
 
 .dropdown-content {
 display: none;
 position: absolute;
 background-color: #f9f9f9;
 min-width: 160px;
 box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
 z-index: 1;
 }
 
 .dropdown-content a {
 float: none;
 color: black;
 padding: 12px 16px;
 text-decoration: none;
 display: block;
 text-align: left;
 }
 
 .dropdown-content a:hover {
 background-color: black;
 color:white;
 }
 
 .dropdown:hover .dropdown-content {
 display: block;
 }
 </style>
 
 <div class="navbar">
 <a href="#home">Home</a>
 <a href="#news">Manu</a>
 <div class="dropdown">
 <button class="dropbtn">DropMenu
 <i class="fa fa-caret-down"></i>
 </button>
 <div class="dropdown-content">
 <a href="#">Link 1</a>
 <a href="#">Link 2</a>
 <a href="#">Link 3</a>
 </div>
 </div> 
 </div>
 <h3> Navigation Bar Menu - 1 </h3>

<style>
 body {
 font-family: 'Lato', sans-serif;
 }
 
 .overlay {
 height: 0%;
 width: 100%;
 position: fixed;
 z-index: 1;
 top: 0;
 left: 0;
 background-color:red;
 overflow-y: hidden;
 transition: 0.5s;
 }
 
 .overlay-content {
 position: relative;
 top: 25%;
 width: 100%;
 text-align: center;
 margin-top: 30px;
 }
 
 .overlay a {
 padding: 8px;
 text-decoration: none;
 font-size: 36px;
 color: white;
 display: block;
 transition: 0.3s;
 }
 
 .overlay a:hover, .overlay a:focus {
 color: #f1f1f1;
 }
 
 .overlay .closebtn {
 position: absolute;
 top: 20px;
 right: 45px;
 font-size: 60px;
 }
 
 @media screen and (max-height: 450px) {
 .overlay {overflow-y: auto;}
 .overlay a {font-size: 20px}
 .overlay .closebtn {
 font-size: 40px;
 top: 15px;
 right: 35px;
 }
 }
 </style>
 
 <div id="myNav" class="overlay">
 <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
 <div class="overlay-content">
 <a href="#">Home</a>
 <a href="#">HTML</a>
 <a href="#">CSS</a>
 <a href="#">JavaScript</a>
 </div>
 </div>
 
 <h2>Navigation Bar Menu - 2</h2>
 
 <span style="font-size:30px;cursor:pointer; padding-left:90%;" onclick="openNav()">☰</span>
 <script>
 function openNav() {
 document.getElementById("myNav").style.height = "100%";
 }
 
 function closeNav() {
 document.getElementById("myNav").style.height = "0%";
 }
 </script>

<style>
 body {font-family: Arial;}
 
 .tab {
 overflow: hidden;
 border: 1px solid;
 background-color: green;
 text-color: white;
 }
 
 .tab button {
 background-color: green;
 float: left;
 border: none;
 outline: none;
 cursor: pointer;
 padding: 14px 16px;
 transition: 0.3s;
 font-size: 17px;
 color: white;
 }
 
 .tab button:hover {
 background-color: black;
 }
 
 .tab button.active {
 background-color: black;
 }
 
 .tabcontent {
 height: 300px;
 display: none;
 padding: 6px 12px;
 border:;
 border-top: none;
 }
 </style>
 
 
 <div class="tab">
 <button class="tablinks" onclick="tab(event, 'html')" id="defaultOpen">HTML</button>
 <button class="tablinks" onclick="tab(event, 'css')">CSS</button>
 <button class="tablinks" onclick="tab(event, 'javascript')">Javascript</button>
 </div>
 
 <div id="html" class="tabcontent">
 <h3>HTML</h3>
 <p>HTML is the standard markup language for Web pages.</p>
 </div>
 
 <div id="css" class="tabcontent">
 <h3>CSS</h3>
 <p>CSS is the language we use to style an HTML document</p> 
 
 </div>
 
 <div id="javascript" class="tabcontent">
 <h3>JavaScript</h3>
 <p>JavaScript is the programming language of the Web.</p>
 </div>
 
 <script>
 function tab(evt, Name) {
 var i, tabcontent, tablinks;
 tabcontent = document.getElementsByClassName("tabcontent");
 for (i = 0; i < tabcontent.length; i++) {
 tabcontent[i].style.display = "none";
 }
 tablinks = document.getElementsByClassName("tablinks");
 for (i = 0; i < tablinks.length; i++) {
 tablinks[i].className = tablinks[i].className.replace(" active", "");
 }
 document.getElementById(Name).style.display = "block";
 evt.currentTarget.className += " active";
 }
 document.getElementById("defaultOpen").click();
 </script>

<style>
 * {box-sizing: border-box}
 body {font-family: "Lato", sans-serif;}
 
 .tab {
 float: left;
 border: 1px solid ;
 background-color: green;
 text-color: white;
 width: 35%;
 height: 300px;
 }
 
 .tab button {
 display: block;
 background-color: green;
 color: white;
 padding: 22px 16px;
 width: 100%;
 border: none;
 outline: none;
 text-align: left;
 cursor: pointer;
 transition: 0.3s;
 font-size: 17px;
 }
 
 .tab button:hover {
 background-color: black;
 }
 
 .tab button.active {
 background-color: black;
 }
 
 .tabcontent {
 float: left;
 padding: 0px 12px;
 border: 1px solid #ccc;
 width: 65%;
 border-left: none;
 height: 300px;
 }
 </style>
 
 <div class="tab">
 <button class="tablinks" onclick="tab(event, 'html')" id="defaultOpen">HTML</button>
 <button class="tablinks" onclick="tab(event, 'css')">CSS</button>
 <button class="tablinks" onclick="tab(event, 'javascript')">Javascript</button>
 </div>
 
 <div id="html" class="tabcontent">
 <h3>HTML</h3>
 <p>HTML is the standard markup language for Web pages.</p>
 </div>
 
 <div id="css" class="tabcontent">
 <h3>CSS</h3>
 <p>CSS is the language we use to style an HTML document</p> 
 </div>
 
 <div id="javascript" class="tabcontent">
 <h3>JavaScript</h3>
 <p>JavaScript is the programming language of the Web.</p>
 </div>
 
 
 <script>
 function tab(evt, Name) {
 var i, tabcontent, tablinks;
 tabcontent = document.getElementsByClassName("tabcontent");
 for (i = 0; i < tabcontent.length; i++) {
 tabcontent[i].style.display = "none";
 }
 tablinks = document.getElementsByClassName("tablinks");
 for (i = 0; i < tablinks.length; i++) {
 tablinks[i].className = tablinks[i].className.replace(" active", "");
 }
 document.getElementById(Name).style.display = "block";
 evt.currentTarget.className += " active";
 }
 
 document.getElementById("defaultOpen").click();
 
 </script>

<style>
 .accordion {
 background-color: black;
 color: white;
 cursor: pointer;
 padding: 18px;
 width: 100%;
 border: none;
 text-align: left;
 outline: none;
 font-size: 17px;
 text-align: center;
 transition: 0.4s;
 }
 
 .active, .accordion:hover {
 background-color: red; 
 }
 
 .panel {
 padding: 0 18px;
 display: none;
 background-color: white;
 display: hidden;
 }
 </style>
 
 <button class="accordion">HTML</button>
 <div class="panel">
 <p>HTML is the standard markup language for Web pages.</p>
 <p>HTML is the standard markup language for Web pages.</p>
 </div>
 
 <button class="accordion">CSS</button>
 <div class="panel">
 <p>CSS is the language we use to style an HTML document</p> 
 <p>CSS is the language we use to style an HTML document</p> 
 </div>
 
 <button class="accordion">JavaScript</button>
 <div class="panel">
 <p>JavaScript is the programming language of the Web.</p>
 <p>JavaScript is the programming language of the Web.</p>
 </div>
 
 <script>
 var acc = document.getElementsByClassName("accordion");
 var i;
 
 for (i = 0; i < acc.length; i++) {
 acc[i].addEventListener("click", function() {
 this.classList.toggle("active");
 var panel = this.nextElementSibling;
 if (panel.style.display === "block") {
 panel.style.display = "none";
 } else {
 panel.style.display = "block";
 }
 });
 }
 </script>

<style>
 details {
 width: 100%;
 margin: 0 auto ;
 background: green;
 margin-bottom: 0.5rem;
 box-shadow: 0 .1rem 1rem -.5rem rgba(0,0,0,.4);
 border-radius: 5px;
 overflow: hidden;
 color:#fafafa;
 text-align: center;
 -webkit-tap-highlight-color: transparent;
 }
 
 summary {
 padding: 1rem;
 display: block;
 background: black;
 padding-left: 2.2rem;
 position: relative;
 cursor: pointer;
 font-size: 17px;
 }
 
 summary:hover
 {
 background: red;
 color:white;
 }
 
 summary:before {
 content: '';
 border-width: .4rem;
 border-style: solid;
 border-color: transparent transparent transparent #fff;
 position: absolute;
 top: 1.3rem;
 left: 1rem;
 transform: rotate(0);
 transform-origin: .2rem 50%;
 transition: .25s transform ease;
 display:none;
 }
 
 details[open] > summary:before {
 transform: rotate(90deg);
 }
 
 details summary::-webkit-details-marker {
 display:none;
 }
 
 details > ul {
 padding-bottom: 1rem;
 margin-bottom: 0;
 }
 
 p{
 padding-left:15px;
 padding-right:15px;
 }
 
 </style>
 
 <details>
 <summary>HTML</summary>
 <p>HTML is the standard markup language for Web pages.</p>
 <p>HTML is the standard markup language for Web pages.</p>
 </details>
 
 <details>
 <summary>CSS</summary>
 <p>CSS is the language we use to style an HTML document</p> 
 <p>CSS is the language we use to style an HTML document</p> 
 </details>
 
 <details>
 <summary>JavaScript</summary>
 <p>JavaScript is the programming language of the Web.</p>
 <p>JavaScript is the programming language of the Web.</p>
 </details>
 
 <script>
 
 document.querySelectorAll("details").forEach(el => el.onclick = closeAll);
 
 function closeAll()
 {
 const open = document.querySelector("details[open]")
 if(open && open !== this) open.removeAttribute("open")
 }
 </script>

<style type="text/css">
  .loading-container1 {
  margin-top: 20px;
  display: flex;
  width: 100%;
  height: 250px;
  align-items: center;
  vertical-align: middle;
  background-color: red;
  }
  
  .loading-container2 {
  margin-top: 20px;
  display: flex;
  width: 100%;
  height: 250px;
  align-items: center;
  vertical-align: middle;
  background-color: blue;
  }
  
  .loading-spinning-bubbles {
  position: relative;
  margin: auto;
  height: 50px;
  }
  
  .loading-spinning-bubbles .bubble-container {
  position: absolute;
  top: calc(50% - 10px/2);
  left: calc(50% - 10px/2);
  transform-origin: -150% 50%;
  }
  
  .loading-spinning-bubbles .bubble-container .bubble {
  background: #FFF;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  animation: bubble 1s infinite;
  animation-delay: inherit;
  }
  
  .loading-spinning-bubbles .bubble-container:nth-of-type(0n+1) {
  transform: translateX(200%) rotate(-90deg);
  animation-delay: -1.5s;
  }
  
  .loading-spinning-bubbles .bubble-container:nth-of-type(0n+2) {
  transform: translateX(200%) rotate(-45deg);
  animation-delay: -1.375s;
  }
  
  .loading-spinning-bubbles .bubble-container:nth-of-type(0n+3) {
  transform: translateX(200%);
  animation-delay: -1.25s;
  }
  
  .loading-spinning-bubbles .bubble-container:nth-of-type(0n+4) {
  transform: translateX(200%) rotate(45deg);
  animation-delay: -1.125s;
  }
  
  .loading-spinning-bubbles .bubble-container:nth-of-type(0n+5) {
  transform: translateX(200%) rotate(90deg);
  animation-delay: -1s;
  }
  
  .loading-spinning-bubbles .bubble-container:nth-of-type(0n+6) {
  transform: translateX(200%) rotate(135deg);
  animation-delay: -0.875s;
  }
  
  .loading-spinning-bubbles .bubble-container:nth-of-type(0n+7) {
  transform: translateX(200%) rotate(180deg);
  animation-delay: -0.75s;
  }
  
  .loading-spinning-bubbles .bubble-container:nth-of-type(0n+8) {
  transform: translateX(200%) rotate(225deg);
  animation-delay: -0.625s;
  }
  
  .loading-spokes {
  position: relative;
  margin: auto;
  height: 45px;
  }
  
  .loading-spokes .spoke-container {
  position: absolute;
  top: 100%;
  left: calc(50% - 10px*1.5);
  transform-origin: 50% -100%;
  }
  
  .loading-spokes .spoke-container .spoke {
  background: #FFF;
  width: 10px;
  height: 20px;
  animation: spoke 1s infinite;
  animation-delay: inherit;
  }
  
  .loading-spokes .spoke-container:nth-of-type(0n+1) {
  transform: translateX(100%) rotate(-90deg);
  animation-delay: -0.875s;
  }
  
  .loading-spokes .spoke-container:nth-of-type(0n+2) {
  transform: translateX(100%) rotate(-45deg);
  animation-delay: -0.75s;
  }
  
  .loading-spokes .spoke-container:nth-of-type(0n+3) {
  transform: translateX(100%);
  animation-delay: -0.625s;
  }
  
  .loading-spokes .spoke-container:nth-of-type(0n+4) {
  transform: translateX(100%) rotate(45deg);
  animation-delay: -0.5s;
  }
  
  .loading-spokes .spoke-container:nth-of-type(0n+5) {
  transform: translateX(100%) rotate(90deg);
  animation-delay: -0.375s;
  }
  
  .loading-spokes .spoke-container:nth-of-type(0n+6) {
  transform: translateX(100%) rotate(135deg);
  animation-delay: -0.25s;
  }
  
  .loading-spokes .spoke-container:nth-of-type(0n+7) {
  transform: translateX(100%) rotate(180deg);
  animation-delay: -0.125s;
  }
  
  .loading-spokes .spoke-container:nth-of-type(0n+8) {
  transform: translateX(100%) rotate(225deg);
  animation-delay: 0;
  }
  
  @keyframes bubble {
  0%, 100% {
  transform: scale(0);
  }
  50% {
  transform: scale(1);
  }
  }
  
  @keyframes spoke {
  0% {
  opacity: 1;
  }
  100% {
  opacity: 0.2;
  }
  }
  </style>
  
  <div class="loading-container1">
  <div class="loading-spinning-bubbles">
  <div class="bubble-container">
  <div class="bubble"></div>
  </div>
  <div class="bubble-container">
  <div class="bubble"></div>
  </div>
  <div class="bubble-container">
  <div class="bubble"></div>
  </div>
  <div class="bubble-container">
  <div class="bubble"></div>
  </div>
  <div class="bubble-container">
  <div class="bubble"></div>
  </div>
  <div class="bubble-container">
  <div class="bubble"></div>
  </div>
  <div class="bubble-container">
  <div class="bubble"></div>
  </div>
  <div class="bubble-container">
  <div class="bubble"></div>
  </div>
  </div>
  </div>
  
  <div class="loading-container2">
  <div class="loading-spokes">
  <div class="spoke-container">
  <div class="spoke"></div>
  </div>
  <div class="spoke-container">
  <div class="spoke"></div>
  </div>
  <div class="spoke-container">
  <div class="spoke"></div>
  </div>
  <div class="spoke-container">
  <div class="spoke"></div>
  </div>
  <div class="spoke-container">
  <div class="spoke"></div>
  </div>
  <div class="spoke-container">
  <div class="spoke"></div>
  </div>
  <div class="spoke-container">
  <div class="spoke"></div>
  </div>
  <div class="spoke-container">
  <div class="spoke"></div>
  </div>
  </div>
  </div>

<style type="text/css">
 .loading-container1 {
 margin-top: 20px;
 display: flex;
 width: 100%;
 height: 250px;
 align-items: center;
 vertical-align: middle;
 background-color: green;
 }
 
 .loading-container2 {
 margin-top: 20px;
 display: flex;
 width: 100%;
 height: 250px;
 align-items: center;
 vertical-align: middle;
 background-color: blue;
 }
 
 .loading-bubbles {
 margin: auto;
 }
 
 .loading-bubbles .bubble-container {
 display: inline-block;
 width: 10px;
 height: 10px;
 margin: 0 5px;
 }
 
 .loading-bubbles .bubble-container .bubble {
 border-radius: 50%;
 background-color: #FFF;
 width: 100%;
 height: 100%;
 transform-origin: 50% 50%;
 animation: bubble 1.2s -0.6s infinite ease-out;
 }
 
 .loading-bubbles .bubble-container:nth-of-type(2n) .bubble {
 animation-delay: -0.3s;
 }
 
 .loading-bubbles .bubble-container:nth-of-type(3n) .bubble {
 animation-delay: 0s;
 }
 
 .loading-bars {
 margin: auto;
 text-align: center;
 }
 
 .loading-bars .bar {
 height: 20px;
 width: 10px;
 background: #FFF;
 display: inline-block;
 animation: pulse 1.2s infinite ease-out;
 }
 
 .loading-bars .bar:nth-of-type(0n+1) {
 animation-delay: 0s;
 }
 
 .loading-bars .bar:nth-of-type(0n+2) {
 animation-delay: 0.2s;
 }
 
 .loading-bars .bar:nth-of-type(0n+3) {
 animation-delay: 0.4s;
 }
 
 .loading-bars .bar:nth-of-type(0n+4) {
 animation-delay: 0.6s;
 }
 
 .loading-bars .bar:nth-of-type(0n+5) {
 animation-delay: 0.8s;
 }
 
 @keyframes bubble {
 0%, 100% {
 transform: scale(0);
 }
 50% {
 transform: scale(1);
 }
 }
 
 @keyframes pulse {
 0%, 75% {
 transform: scale(1, 1);
 }
 25% {
 transform: scale(1, 3);
 }
 }
 </style>
 
 <div class="loading-container1">
 <div class="loading-bubbles">
 <div class="bubble-container">
 <div class="bubble"></div>
 </div>
 <div class="bubble-container">
 <div class="bubble"></div>
 </div>
 <div class="bubble-container">
 <div class="bubble"></div>
 </div>
 </div>
 </div>
 
 
 <div class="loading-container2">
 <div class="loading-bars">
 <div class="bar"></div>
 <div class="bar"></div>
 <div class="bar"></div>
 <div class="bar"></div>
 <div class="bar"></div>
 </div>
 </div>

<style type="text/css">
 .loading-container1 {
 margin-top: 20px;
 display: flex;
 width: 100%;
 height: 250px;
 align-items: center;
 vertical-align: middle;
 background-color: orange;
 }
 
 .loading-container2 {
 margin-top: 20px;
 display: flex;
 width: 100%;
 height: 250px;
 align-items: center;
 vertical-align: middle;
 background-color: blue;
 }
 
 
 .loading-circle {
 margin: 0 auto;
 width: 40px;
 height: 40px;
 border-radius: 50%;
 border: 4px solid #BEB69D;
 position: relative;
 animation: spin 1s infinite linear;
 }
 
 .loading-circle:before {
 content: "";
 width: 40px;
 height: 40px;
 border-radius: 50%;
 display: block;
 position: absolute;
 left: -4px;
 top: -4px;
 border-right: 4px solid #BEB69D;
 border-top: 4px solid #BEB69D;
 border-left: 4px solid #FFF;
 border-bottom: 4px solid #BEB69D;
 }
 
 .loading-quarter-circle {
 margin: 0 auto;
 width: 40px;
 height: 40px;
 border-radius: 50%;
 border: 4px solid transparent;
 position: relative;
 animation: spin 1.2s infinite linear;
 }
 
 .loading-quarter-circle:before {
 content: "";
 width: 40px;
 height: 40px;
 border-radius: 50%;
 display: block;
 position: absolute;
 left: -4px;
 top: -4px;
 border-right: 4px solid transparent;
 border-top: 4px solid transparent;
 border-left: 4px solid #FFF;
 border-bottom: 4px solid transparent;
 }
 
 @keyframes spin {
 100% {
 transform: rotate(360deg);
 }
 }
 </style>
 
 <div class="loading-container1">
 <div class="loading-circle"></div>
 </div>
 
 
 <div class="loading-container2">
 <div class="loading-quarter-circle"></div>
 </div>

<style type="text/css">
 
 body {
 text-align: center;
 background: LightGray;
 }
 
 section {
 margin-top: 100px;
 float: left;
 min-width: 150px;
 width: 33.33%;
 padding: 25px 0;
 min-height: 100px;
 }
 
 /*=====================*/
 .checkbox {
 position: relative;
 display: inline-block;
 }
 
 .checkbox:after, .checkbox:before {
 font-family: FontAwesome;
 font-feature-settings: normal;
 -webkit-font-kerning: auto;
 font-kerning: auto;
 font-language-override: normal;
 font-stretch: normal;
 font-style: normal;
 font-synthesis: weight style;
 font-variant: normal;
 font-weight: normal;
 text-rendering: auto;
 }
 
 .checkbox label {
 width: 90px;
 height: 42px;
 background: #ccc;
 position: relative;
 display: inline-block;
 border-radius: 46px;
 transition: 0.4s;
 }
 
 .checkbox label:after {
 content: '';
 position: absolute;
 width: 50px;
 height: 50px;
 border-radius: 100%;
 left: 0;
 top: -5px;
 z-index: 2;
 background: #fff;
 box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
 transition: 0.4s;
 }
 
 .checkbox input {
 position: absolute;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 z-index: 5;
 opacity: 0;
 cursor: pointer;
 }
 
 .checkbox input:hover + label:after {
 box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.2), 0 3px 8px 0 rgba(0, 0, 0, 0.15);
 }
 
 .checkbox input:checked + label:after {
 left: 40px;
 }
 
 .model-2 .checkbox label {
 width: 75px;
 }
 
 .model-2 .checkbox label:after {
 top: 0;
 width: 42px;
 height: 42px;
 }
 
 .model-2 .checkbox input:checked + label {
 background: #4BD865;
 }
 
 .model-2 .checkbox input:checked + label:after {
 left: 35px;
 }
 
 .model-3 .checkbox label {
 background: #fff;
 border: 1px solid #eee;
 height: 38px;
 }
 
 .model-3 .checkbox label:after {
 background: #bbb;
 top: 3px;
 left: 5px;
 width: 30px;
 height: 30px;
 }
 
 .model-3 .checkbox input:checked + label:after {
 background: #3fb454;
 left: 55px;
 }
 
 .model-4 .checkbox label {
 background: #bbb;
 height: 25px;
 width: 75px;
 }
 
 .model-4 .checkbox label:after {
 background: #fff;
 top: -8px;
 width: 38px;
 height: 38px;
 }
 
 .model-4 .checkbox input:checked + label {
 background: blue;
 }
 
 .model-4 .checkbox input:checked + label:after {
 background: blue;
 left: 40px;
 }
 
 .model-5 .checkbox label {
 background: #bbb;
 height: 15px;
 width: 85px;
 }
 
 .model-5 .checkbox label:after {
 background: #fff;
 top: -12px;
 width: 36px;
 height: 36px;
 }
 
 .model-5 .checkbox input:hover + label:after {
 transform: scale(1.4, 1.4);
 }
 
 .model-5 .checkbox input:checked + label {
 background: #b66d0b;
 }
 
 .model-5 .checkbox input:checked + label:after {
 background: #FF980F;
 left: 50px;
 }
 
 </style>
 
 <section class="model-2">
 <div class="checkbox">
 <input type="checkbox"/>
 <label></label>
 </div>
 </section>
 
 <section class="model-3">
 <div class="checkbox">
 <input type="checkbox"/>
 <label></label>
 </div>
 </section>
 
 <section class="model-4">
 <div class="checkbox">
 <input type="checkbox"/>
 <label></label>
 </div>
 </section>
 
 <section class="model-5">
 <div class="checkbox">
 <input type="checkbox"/>
 <label></label>
 </div>
 </section>

<style type="text/css">
  
  body {
  text-align: center;
  background: LightGray;
  }
  
  section {
  margin-top: 100px;
  float: left;
  min-width: 150px;
  width: 33.33%;
  padding: 25px 0;
  min-height: 100px;
  }
  
  /*=====================*/
  .checkbox {
  position: relative;
  display: inline-block;
  }
  
  .checkbox:after, .checkbox:before {
  font-family: FontAwesome;
  font-feature-settings: normal;
  -webkit-font-kerning: auto;
  font-kerning: auto;
  font-language-override: normal;
  font-stretch: normal;
  font-style: normal;
  font-synthesis: weight style;
  font-variant: normal;
  font-weight: normal;
  text-rendering: auto;
  }
  
  .checkbox label {
  width: 90px;
  height: 42px;
  background: #ccc;
  position: relative;
  display: inline-block;
  border-radius: 46px;
  transition: 0.4s;
  }
  
  .checkbox label:after {
  content: '';
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 100%;
  left: 0;
  top: -5px;
  z-index: 2;
  background: #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  transition: 0.4s;
  }
  
  .checkbox input {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  opacity: 0;
  cursor: pointer;
  }
  
  .checkbox input:hover + label:after {
  box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.2), 0 3px 8px 0 rgba(0, 0, 0, 0.15);
  }
  
  .checkbox input:checked + label:after {
  left: 40px;
  }
  
  .model-6 .checkbox label {
  background: #bbb;
  height: 2px;
  width: 60px;
  }
  
  .model-6 .checkbox label:after {
  background: #bbb;
  top: -16px;
  width: 32px;
  height: 32px;
  }
  
  .model-6 .checkbox input:checked + label {
  background: blue;
  }
  
  .model-6 .checkbox input:checked + label:after {
  background: blue;
  left: 40px;
  }
  
  .model-7 .checkbox label {
  background: none;
  border: 5px solid #555;
  height: 42px;
  }
  
  .model-7 .checkbox label:after {
  background: #555;
  box-shadow: none;
  top: 2px;
  left: 2px;
  width: 28px;
  height: 28px;
  }
  
  .model-7 .checkbox input:checked + label {
  border-color: #329043;
  }
  
  .model-7 .checkbox input:checked + label:after {
  background: #3fb454;
  left: 50px;
  }
  
  .model-8 .checkbox label {
  background: #ddd;
  width: 95px;
  border-radius: 10px;
  }
  
  .model-8 .checkbox label:after {
  background: #fff;
  border-radius: 10px;
  top: 0;
  width: 60px;
  height: 42px;
  }
  
  .model-8 .checkbox input:checked + label {
  background: #FF980F;
  }
  
  .model-8 .checkbox input:checked + label:after {
  left: 35px;
  }
  
  .model-9 .checkbox label {
  background: #aaa;
  width: 90px;
  height: 32px;
  border-radius: 20px;
  }
  
  .model-9 .checkbox label:after {
  border-radius: 20px;
  top: 0;
  width: 50px;
  height: 32px;
  }
  
  .model-9 .checkbox input:checked + label {
  background: blue;
  }
  
  .model-9 .checkbox input:checked + label:after {
  background: #369a48;
  left: 40px;
  }
  
  </style>
  
  <section class="model-6">
  <div class="checkbox">
  <input type="checkbox"/>
  <label></label>
  </div>
  </section>
  
  <section class="model-7">
  <div class="checkbox">
  <input type="checkbox"/>
  <label></label>
  </div>
  </section>
  
  <section class="model-8">
  <div class="checkbox">
  <input type="checkbox"/>
  <label></label>
  </div>
  </section>
  
  <section class="model-9">
  <div class="checkbox">
  <input type="checkbox"/>
  <label></label>
  </div>
  </section>

<style type="text/css">
 body {
 text-align: center;
 background: #eee;
 }
 
 section {
 margin-top: 100px;
 float: left;
 min-width: 150px;
 width: 33.33%;
 padding: 25px 0;
 min-height: 100px;
 }
 
 /*=====================*/
 .checkbox {
 position: relative;
 display: inline-block;
 }
 
 .checkbox:after, .checkbox:before {
 font-family: FontAwesome;
 font-feature-settings: normal;
 -webkit-font-kerning: auto;
 font-kerning: auto;
 font-language-override: normal;
 font-stretch: normal;
 font-style: normal;
 font-synthesis: weight style;
 font-variant: normal;
 font-weight: normal;
 text-rendering: auto;
 }
 
 .checkbox label {
 width: 90px;
 height: 42px;
 background: #ccc;
 position: relative;
 display: inline-block;
 border-radius: 46px;
 transition: 0.4s;
 }
 
 .checkbox label:after {
 content: '';
 position: absolute;
 width: 50px;
 height: 50px;
 border-radius: 100%;
 left: 0;
 top: -5px;
 z-index: 2;
 background: #fff;
 box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
 transition: 0.4s;
 }
 
 .checkbox input {
 position: absolute;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 z-index: 5;
 opacity: 0;
 cursor: pointer;
 }
 
 .checkbox input:hover + label:after {
 box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.2), 0 3px 8px 0 rgba(0, 0, 0, 0.15);
 }
 
 .checkbox input:checked + label:after {
 left: 40px;
 }
 
 .model-10 .checkbox:after {
 content: '\f00d';
 color: #aaa;
 position: relative;
 right: 30px;
 bottom: 15px;
 }
 
 .model-10 .checkbox:before {
 content: '\f00c';
 position: relative;
 left: 35px;
 bottom: 15px;
 color: #fff;
 z-index: 1;
 }
 
 .model-10 .checkbox label {
 width: 80px;
 background: #EAEAEA;
 box-shadow: 0 0 1px 2px rgba(0, 0, 0, 0.15);
 }
 
 .model-10 .checkbox label:after {
 top: 0;
 width: 42px;
 height: 42px;
 }
 
 .model-10 .checkbox input:checked + label {
 background: #4BD865;
 }
 
 .model-10 .checkbox input:checked + label:after {
 left: 40px;
 }
 
 .model-12 .checkbox {
 background: ;
 height: 40px;
 width: 160px;
 border-radius: 50px;
 }
 
 .model-12 .checkbox:after, .model-12 .checkbox:before {
 content: 'ON';
 font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
 line-height: 40px;
 font-size: 12px;
 }
 
 .model-12 .checkbox:before {
 content: 'OFF';
 z-index: 1;
 }
 
 .model-12 .checkbox label {
 background: #1E1E1E;
 height: 10px;
 width: 70px;
 margin: 0 5px;
 box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.3) inset;
 }
 
 .model-12 .checkbox label:after {
 background-color: #3F4545;
 background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzY2NjY2NiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzNmNDU0NSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
 background-size: 100%;
 background-image: linear-gradient(to bottom, #666666 0%, #3f4545 100%);
 top: -9px;
 width: 27px;
 height: 27px;
 }
 
 .model-12 .checkbox label:before {
 content: '';
 position: absolute;
 width: 14px;
 height: 14px;
 border-radius: 100%;
 transition: 0.4s;
 background: #151515;
 z-index: 3;
 left: 7px;
 top: -2px;
 }
 
 .model-12 .checkbox input:checked + label:after {
 left: 45px;
 }
 
 .model-12 .checkbox input:checked + label:before {
 background: #94DA00;
 box-shadow: 0 0 5px #94DA00;
 left: 52px;
 }
 
 .model-13 .checkbox:after {
 content: 'OFF';
 font-family: Arial;
 position: absolute;
 color: #666;
 top: 12px;
 right: 15px;
 }
 
 .model-13 .checkbox label {
 background: none;
 border: 3px solid #777;
 height: 40px;
 border-radius: 20px;
 }
 
 .model-13 .checkbox label:after {
 content: 'ON';
 font-family: Arial;
 color: #fff;
 line-height: 28px;
 text-indent: 100px;
 background: #777;
 overflow: hidden;
 box-shadow: none;
 border-radius: 14px;
 transform: translateX(-50px);
 -moz-transition: all 0.4s 0.2s, width 0.2s linear, text-indent 0.4s linear;
 -o-transition: all 0.4s 0.2s, width 0.2s linear, text-indent 0.4s linear;
 -webkit-transition: all 0.4s, width 0.2s linear, text-indent 0.4s linear;
 -webkit-transition-delay: 0.2s, 0s, 0s;
 transition: all 0.4s 0.2s, width 0.2s linear, text-indent 0.4s linear;
 top: 3px;
 left: auto;
 right: 2px;
 width: 28px;
 height: 28px;
 }
 
 .model-13 .checkbox input:checked + label {
 border-color: #329043;
 }
 
 .model-13 .checkbox input:checked + label:after {
 background: #3fb454;
 left: auto;
 transform: translateX(0px);
 -moz-transition: all 0.4s, width 0.2s linear 0.4s, text-indent 0.3s linear 0.4s;
 -o-transition: all 0.4s, width 0.2s linear 0.4s, text-indent 0.3s linear 0.4s;
 -webkit-transition: all 0.4s, width 0.2s linear, text-indent 0.3s linear;
 -webkit-transition-delay: 0s, 0.4s, 0.4s;
 transition: all 0.4s, width 0.2s linear 0.4s, text-indent 0.3s linear 0.4s;
 width: 80px;
 text-indent: 0;
 }
 
 .model-14 .checkbox:after, .model-14 .checkbox:before {
 content: 'OFF';
 position: absolute;
 right: 10px;
 top: 10px;
 font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
 font-size: 12px;
 color: #90201F;
 }
 
 .model-14 .checkbox:before {
 content: 'ON';
 left: -40px;
 z-index: 1;
 color: #266c33;
 }
 
 .model-14 .checkbox label {
 background: #fff;
 height: 32px;
 border-radius: 0;
 box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
 }
 
 .model-14 .checkbox label:after {
 background: #90201F;
 border-radius: 0;
 box-shadow: none !important;
 transition: 0.3s;
 top: 0;
 width: 40px;
 height: 32px;
 }
 
 .model-14 .checkbox input:checked + label:after {
 background: #4BD865;
 left: 50px;
 }
 </style>
 
 <section class="model-10">
 <div class="checkbox">
 <input type="checkbox"/>
 <label></label>
 </div>
 </section>
 <section class="model-12">
 <div class="checkbox">
 <input type="checkbox"/>
 <label></label>
 </div>
 </section>
 
 <section class="model-13">
 <div class="checkbox">
 <input type="checkbox"/>
 <label></label>
 </div>
 </section>
 
 <section class="model-14">
 <div class="checkbox">
 <input type="checkbox"/>
 <label></label>
 </div>
 </section>

<style>
 
 *{
 margin: 0;
 padding: 0;
 }
 
 .mlarp{
 width:94%;
 height:50px;
 padding-left:3%;
 padding-right:3%;
 color:black;
 font-size:23px;
 display: flex;
 justify-content: right;
 align-items: center;
 }
 
 .clarp{
 width:94%;
 height:50px;
 padding-left:3%;
 padding-right:3%;
 color:black;
 font-size:20px;
 display: flex;
 justify-content: right;
 align-items: center;
 }
 
 .td1{
 width:25%;
 height:90px;
 background-color:black;
 font-size:25px;
 color:white;
 }
 
 .td2{
 width:25%;
 height:90px;
 background-color:red;
 font-size:25px;
 color:white;
 }
 
 .bottom{
 width:50%;
 height:90px;
 background-color:red;
 font-size:25px;
 color:white;
 }
 
 .bottomright{
 width:25%;
 height:90px;
 background-color:black;
 font-size:25px;
 color:white;
 }
 
 .top{
 width:50%;
 height:90px;
 background-color:black;
 font-size:25px;
 color:white;
 }
 
 .topright{
 width:50%;
 height:90px;
 background-color:black;
 font-size:25px;
 color:white;
 }
 
 </style>
 
 <p id="mid" class="mlarp" align="center" ></p>
 <p id="cid"  class="clarp" align="center" ></p>
 
 
 <table width="100%" >
 <tr>
 <td id="calculatorid" class="top" align="center" onclick="calculator()">C</td>
 <td id="calculatorid" class="topright" align="center" onclick="calculator()">÷</td>
 </tr>
 </table>
 
 <table width="100%" >
 <tr>
 <td id="calculatorid" class="td2" align="center" onclick="calculator()">7</td>
 <td id="calculatorid" class="td2" align="center" onclick="calculator()">8</td>
 <td id="calculatorid" class="td2" align="center" onclick="calculator()">9</td>
 <td id="calculatorid" class="td1" align="center" onclick="calculator()">×</td>
 </tr>
 
 <tr>
 <td id="calculatorid" class="td2" align="center" onclick="calculator()">4</td>
 <td id="calculatorid" class="td2" align="center" onclick="calculator()">5</td>
 <td id="calculatorid" class="td2" align="center" onclick="calculator()">6</td>
 <td id="calculatorid" class="td1" align="center" onclick="calculator()">-</td>
 </tr>
 
 <tr>
 <td id="calculatorid" class="td2" align="center" onclick="calculator()">1</td>
 <td id="calculatorid" class="td2" align="center" onclick="calculator()">2</td>
 <td id="calculatorid" class="td2" align="center" onclick="calculator()">3</td>
 <td id="calculatorid" class="td1" align="center" onclick="calculator()">+</td>
 </tr>
 </table>
 
 <table width="100%" >
 <tr>
 <td id="calculatorid" class="bottom" align="center" onclick="calculator()">0</td>
 <td id="calculatorid" class="td2" align="center" onclick="calculator()">.</td>
 <td id="calculatorid" class="bottomright" align="center" onclick="calculator()">=</td>
 </tr>
 </table>
 
 <script>
 function calculator(ev)
 {
 cal = document.getElementById("mid").textContent;
 if(event.currentTarget.innerText!="=")
 {
 document.getElementById("mid").innerHTML = cal+event.currentTarget.innerText;
 }
 
 if(event.currentTarget.innerText=="C")
 {
 document.getElementById("mid").innerHTML = "";
 document.getElementById("cid").innerHTML = "";
 }
 
 else if(event.currentTarget.innerText=="=")
 {
 try{
 document.getElementById("cid").innerHTML = eval(cal.replace(/×/g,"*").replace(/÷/g,"/"))
 }
 catch(err) {
 document.getElementById("cid").innerHTML = "ERROR";  
 }
 }
 }
 </script>

Comments