CODEWITHSUNDEEP
htmlcss
BUKTOP
BUKTOP

Reputation: 971

Input button - resize text but keep button size

I want to make a custom button CSS and try to make "pressed" button looks like it's pressed:

input[type="button"]
{
  border: 1px solid #777;
  border-radius: .2em;
  box-shadow: 0 0 .3em #777;
  background: #fff;
  color: #555;
  font-size: 1rem;
  height: 2rem;
  margin: .5rem;
  -webkit-appearance: none;
}


input[type="button"]:active
{
  box-shadow: inset 0 0 .1em #777;
  font-size: .9em;
  height: 2rem;
}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra ligula vitae eros ultrices luctus. 
<input type="button" value="Button one"> Vivamus ut felis massa. Cras a urna egestas, vehicula diam eu, accumsan lectus. Sed feugiat, odio quis cursus venenatis, felis dolor ultricies arcu, sit amet convallis eros nisi vel neque. <input type="button" value="Second button"> Cras facilisis in diam vel eleifend. Duis at tincidunt dui. Aliquam egestas at metus in malesuada. Nulla tincidunt lorem vel cursus porttitor. Phasellus gravida eleifend nulla.

Looks ok for me, but changing font size expectedly resizes button itself, causing the whole layout to change. At the other hand, I cannot set button' width because I want to make a 'generic' CSS for all my pages and all buttons there, and I do not know what text will be inside. The question: is there a way to keep button's width while changing its font size? Or the only way is to use "div in div" instead of buttons?

Upvotes: 2

Views: 1319

Answers (2)

Jack Wong
Jack Wong

Reputation: 221

Instead of changing the font-size on active, you can reduce the scale of the button so it still maintains its original width but also reduce in size visually. 

transform: scale(0.95);

Upvotes: 2

Poul Bak
Poul Bak

Reputation: 10929

You can experiment with setting the relative 'padding-left' and 'padding-right' on the button, when 'active'.

Here I set it to 10% (which is obviously too big):

input[type="button"]
{
  border: 1px solid #777;
  border-radius: .2em;
  box-shadow: 0 0 .3em #777;
  background: #fff;
  color: #555;
  font-size: 1rem;
  height: 2rem;
  margin: .5rem;
  -webkit-appearance: none;
}


input[type="button"]:active
{
  box-shadow: inset 0 0 .1em #777;
  font-size: .9em;
  height: 2rem;
  padding-left: 10%;
  padding-right: 10%;
 }
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra ligula vitae eros ultrices luctus. 
<input type="button" value="Button one"> Vivamus ut felis massa. Cras a urna egestas, vehicula diam eu, accumsan lectus. Sed feugiat, odio quis cursus venenatis, felis dolor ultricies arcu, sit amet convallis eros nisi vel neque. <input type="button" value="Second button"> Cras facilisis in diam vel eleifend. Duis at tincidunt dui. Aliquam egestas at metus in malesuada. Nulla tincidunt lorem vel cursus porttitor. Phasellus gravida eleifend nulla.

Upvotes: 0

Related Questions