Fulfledge

Polish how it looks

INPUT · Slides

Make the small button in a header

01 / 05

The smaller the part, the less you can cut corners

A small link like "Log in" at the right of a header. It does not stand out, but it matters that people can tell it is pressable.

In this round you make one out of the tools you already have.

02 / 05

The HTML is very short

The contents are one link, and that is all. Every bit of decoration goes in the CSS.

The shorter the HTML, the easier it is to change the look later.

<a class="login" href="#">Log in</a>

03 / 05

Change the weight of the text

font-weight makes text bold.

  • bold … heavy
  • normal … ordinary (for when you want a heading lighter)

Small text reads better when it is made heavier.

.login {  font-size: 14px;  font-weight: bold;}

04 / 05

Wrap it into a pressable shape

A border, some rounding and some space make it look pressable. With no fill it stays quieter than the main button, which is just right.

It is a link, so do not forget text-decoration: none; and display: inline-block;.

.login {  display: inline-block;  padding: 8px 16px;  border: 1px solid #7b5ea7;  border-radius: 4px;  text-decoration: none;}

05 / 05

Put it at the right edge and it is done

Last, float: right; to send it to the right of the header — the setting you learned last lesson.

The only new one is font-weight. The rest you build out of the tools you have. Have a go.