CODEWITHSUNDEEP
htmlcss
HTML_Newbie
HTML_Newbie

Reputation: 111

Behaviour when changing the size of a button

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;

enter image description here

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

enter image description here

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)

enter image description here

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>

Upvotes: 2

Views: 133

Answers (4)

Kevin Meisenbacher
Kevin Meisenbacher

Reputation: 33

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;
}

Upvotes: 1

gru
gru

Reputation: 3069

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>

Upvotes: 3

Andrei Fedorov
Andrei Fedorov

Reputation: 3977

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>

Upvotes: 1

chase
chase

Reputation: 327

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;
}

Upvotes: 1

Related Questions