I'm currently working on a toggle switch that I want to make responsive for future resizing. The toggle switch includes a red square (for demonstration purposes), but I've encountered an issue where the red square stretches and changes its dimensions when I adjust the width and height of the toggle switch. What I really want is for the red square to maintain its shape and position, regardless of the size of the toggle switch.
Here's an example:
width: 9em;
height: 4.5em;
https://i.sstatic.net/bLBxP.png
/*half the size*/
width: 4.5em;
height: 2.25em;
https://i.sstatic.net/iP3Mc.png
The red square inexplicably becomes a rectangle and shifts to the left. Below is how I want it to remain consistent in appearance even when resized (exact same, just smaller)
https://i.sstatic.net/uHjff.png
I've experimented with percentage values, vh units, min-width, max-width, em, rem, px, etc., but haven't found a solution yet. Any suggestions?
* {
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>