body { height: 80px; width: 200px; background-color: #35363a; color: azure; } .header{ position: fixed; text-align: center; top: 5px; width: 100%; } .footer{ position: fixed; text-align: center; bottom: 0px; width: 100%; } .toggleContainer{ display: flex; align-items: center; } .toggleText{ padding: 1px; } .toggleButton{ padding: 20px 1px; } a { outline: none; text-decoration: none; padding: 2px 1px 0; } a:link { color: #5eca05; } a:visited { color: #437A16; } a:focus { border-bottom: 1px solid; background: #BAE498; } a:hover { border-bottom: 1px solid; background: #CDFEAA; } a:active { background: #265301; color: #CDFEAA; } /* The switch - the box around the slider */ .switch { position: relative; display: inline-block; width: 85px; height: 34px; } /* Hide default HTML checkbox */ .switch input { opacity: 0; width: 0; height: 0; } /* The slider */ .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s; } .slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s; } input:checked + .slider { background-color: #2196F3; } input:focus + .slider { box-shadow: 0 0 1px #2196F3; } input:checked + .slider:before { -webkit-transform: translateX(52px); -ms-transform: translateX(52px); transform: translateX(52px); } .slider:after { content:'OFF'; color: white; display: block; position: absolute; transform: translate(-50%,-50%); top: 50%; left: 50%; font-size: 10px; font-family: Verdana, sans-serif; } input:checked + .slider:after { content:'ON'; } /* Rounded sliders */ .slider.round { border-radius: 34px; } .slider.round:before { border-radius: 50%; }