Fluid CSS

,

We are going to add a <button class="button"> My two cents </button> with these styles:

1
2
3
4
5
6
7
8
.button {
  background-color: #292929;
  color: #ffffff;
  height: 30px;
  width: 100px;
  line-height: 30px;
  padding: 0;
}

Imagine we want to reuse this button. Everything should stay the same in the button except the text:

1
<button class="button"> Click here to get my two cents on some UI topics </button>

Our button doesn’t look good any more. We can’t see the whole text. Button in not fluid, it can not hold any text. Text within the button should not be wider than 100px because we set such width. Fluid layout means that any content fits in the button while keeping the same design or appearance of the button. Instead of applying fixed 30px to height and 100px to width, maybe we can consider using padding instead. (I say maybe because sometimes UI requires all the buttons to be the same size. Then you will have to adjust the button’s content accordingly.) If we add padding instead of height and width, then no matter what content we put in the button, button will not break, text will always be visible.

1
2
3
4
5
6
7
8
.button {
    background-color: #292929;
    color: #ffffff;
    line-height: 30px;
    padding: 3px 10px;
  }

  <button class="button"> Click here to get my two cents on some UI topics </button>