Switch Button

HTML
<div class="switch"></div>
SCSS
/*-------------------- Mixins ---------------------*/ @mixin center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: all .1s ease-out; } /*-------------------- Body ---------------------*/ *, *::before, *::after { box-sizing: border-box; } body, html { height: 100%; font-family: 'Titillium Web', sans-serif; background: #eee; } /*-------------------- Switch --------------------*/ .switch { @include center; width: 97px; height: 97px; z-index: 1; border-radius: 50%; background: linear-gradient(to top, #eeeeee, #e6e1df); box-shadow: inset 0 2px 3px rgba(91, 85, 86, 0.37); cursor: pointer; &::before { @include center; content: ''; width: 88px; height: 88px; z-index: 2; background: linear-gradient(to bottom, #f5f5f5, #e7e7e7); border-radius: 50%; box-shadow: 0 2px 6px rgba(83, 73, 74, 0.44), 0 0 0 1px rgba(41, 41, 41, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.77); } &::after { @include center; content: 'OFF'; z-index: 3; font-size: 16px; color: #73706b; text-shadow: 0 2px 0 rgba(255, 255, 255, 1); } } .switch:hover { &::before { background: linear-gradient(to bottom, #e7e7e7, #f5f5f5); } } .switch.active { width: 117px; height: 117px; background: linear-gradient(to left, #ef32d9 , #89fffd); box-shadow: inset 0 0 7px rgba(87, 0, 10, 0.57); transform-origin: center; // animation: loop 1.5s linear infinite; &::before { background: linear-gradient(to bottom, #dbcfca, #fcf6f0); box-shadow: 0 2px 8px rgba(183, 0, 15, 0.44), 0 0 0 1px rgba(41, 41, 41, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.77); } &::after { content: 'ON'; color: #ef32d9; } } @keyframes loop { 0% { transform: rotate(0) translate(-50%, -50%); } 100% { transform: rotate(360deg) translate(-50%, -50%); } }
JAVASCRIPT
$('.switch').click(function(){ $(this).toggleClass('active'); })
Expand for more options Login