Paid

:root{ --button: black; --button_h: grey; --width_r: -200px; --width: 200px;}#settings-switcher {position: fixed;right: var(--width_r);transition: all ease 0.25s;z-index: 999;top: 50%;background: #FFF;color: #1d2d2d;font-size: 13px;padding: 20px;width: var(--width);text-align: center;transform: translateY(-50%);border: 1px solid #e6e9ef;}#settings-switcher.active {right: 0;}#ss-icom {background: #FFF;position: absolute;left: -50px;top: -1px;padding: 10px;font-size: 25px;width: 50px;cursor: pointer;border: 1px solid #e6e9ef;}#ss-icom:hover {color: #444;}#settings-switcher h3, #settings-switcher h4 {margin-bottom: 12px;font-size: 13px;font-weight: 700;}#settings-switcher ul, #settings-switcher span {text-align: center;}#settings-switcher ul li, #settings-switcher span b {display: inline-block;}#theme-light, #theme-dark, #sidebar-left, #sidebar-right {padding: 3px 7px;display: inline-block;color: #1d2d2d;border: 1px solid #1d2d2d;border-radius: 2px;}#theme-light:hover, #sidebar-left:hover, #sidebar-right:hover {color: #777;}#theme-dark {background: #1d2d2d;color: #FFF;}#ss-buy-now {background: var(--button);display: block;text-align: center;padding: 5px;border-radius: 2px;color: #FFF;text-transform: uppercase;}#ss-buy-now:hover {background: var(--button_h);}#ss-buy-now i {margin-right: 7px;}#ss-theme-colors {font-size: 0;}#ss-theme-colors li {width: 25%;}#ss-theme-colors li {padding: 1px;}#ss-theme-colors li a {display: inline-block;padding: 10px;width: 100%;}@media (max-width: 620px) {#settings-switcher {bottom: 0;top: initial;transform: initial;}.ss-ps {display: none;}#ss-icom {font-size: 20px;width: 40px;left: -40px;padding: 5px;}}

Demo Site for Login

Username demo Password demo_88

Buy now $(document).ready(function () { $("#ss-icom").click(function () { $('#settings-switcher').addClass('active'); }); }); $(document).mouseup(function(e){ var container = $("#settings-switcher"); // If the target of the click isn't the container if(!container.is(e.target) && container.has(e.target).length === 0){ container.removeClass('active'); } });