Aralbay Issatayev Aralbay Issatayev -3 years ago 105
HTML Question

create switch with labels element

I want to create switch like this, where i can choose only one option from two
enter image description here

enter image description here

I could do this one, but cant figure out how to overlay them.



margin-top: 15px;
width: 50%;
height: 25px;
border-radius: 20px;
border: none;
linear-gradient(to right, #2BD563, #0183D3) no-repeat;
text-transform: uppercase;

anyone who can help?

thanks in advance!

Answer Source

You can make one button overlays the second by adding simple CSS to it. Like this :)

button {
  background: red;
  width: 200px;
  height: 30px;
  border-radius: 10px;
  border: none;

.overlay {
  background: green;
  position: relative;
  left: -20px;
<button class="overlay">Two</button>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download