Behaviour when changing the size of a button

January 26, 2022

I’m working on creating a toggle switch. I want it to be responsive in case i’d like to resize it in the future. The toggle switch has a red square in it (for demonstration) and the problem is that when i change the width and height of the toggle switch, the red square stretches and changes its dimensions. What I’d like it to do is to keep its shape and to not have it moving around no matter how big or small the toggle switch is.

Here’s a demonstration:

width: 9em;
height: 4.5em;

/*half the size*/    
width: 4.5em; 
height: 2.25em;

The red square becomes a rectangle for some reason and moves to the left.
Below is how I want it to look like when I change the width and height
(a.k.a exactly the same, just smaller)

I’ve tried percentage, vh, min-width, max-width, em, rem, px and the list goes on. Any ideas?

* {
    box-sizing: border-box;
}
button {
/*the height is 50% of the width*/
    width: 9em;
    height: 4.5em;
    border-radius: 100px 100px;
    border:none;
    padding-left: 1em;
}

.switch {
    display: block; 
    width: 40%;
    height: 70%;
    background-color: red;
}

<!DOCTYPE html>
<html>
    <head>
        <link href="style.css" rel="stylesheet">
    </head>
    <body>
            <button>
                 <span class="switch"></span>
            </button>
    </body>
</html>

>Solution :

If you want to keep the aspect ratio of 1:1, you should try the trick of using the same value for width and padding-bottom, as you can read in this answer here: How to style a div to be a responsive square?

Here is your modified example:

* {
  box-sizing: border-box;
}

button {
  /*the height is 50% of the width*/
  width: 18em;
  height: 9em;
  border-radius: 100px 100px;
  border: none;
}

.switch {
  display: block;
  height: 0;
  width: 35%;
  padding-bottom: 35%;
  margin-left: 10%;
  background-color: red;
}

<!DOCTYPE html>
<html>

<head>
  <link href="style.css" rel="stylesheet">
</head>

<body>
  <button>
                 <span class="switch"></span>
            </button>
</body>

</html>