Behaviour when changing the size of a button

Question

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>

score 3 · Accepted Answer · answered Jan 26 '22 at 16:37

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>

score 1 · Answer 2 · answered Jan 26 '22 at 16:34

1

You could use min-width and min-height and/or max-width and max-height

.switch {
    display: block; 
    min-width: 4rem;
    min-height: 4rem;
    background-color: red;
}

answered Jan 26 '22 at 16:34

chase

317
2
9

score 1 · Answer 3 · answered Jan 26 '22 at 16:34

You did padding change half-size too. But use padding for position is bad idea.

* {
  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;
  margin-right: 2em;
}

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

button.half {
  width: 4.5em;
  height: 2.25em;
  border-radius: 100px 100px;
  border: none;
  padding-left: 0.5em;  /* !!! */
}

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

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

Kevin Meisenbacher · Answer 4 · 2022-01-28T02:34:14.730

1

You gotta halve the padding as well. After putting your code in the tryit editor, my results looked similar, but setting the button's padding to 0.5em did the trick. Try this:

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

edited Jan 28 '22 at 02:34

answered Jan 26 '22 at 16:45

Kevin Meisenbacher

33
8

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jan 26 '22 at 16:58

Behaviour when changing the size of a button

4 Answers4