Fulfledge

Polish how it looks

INPUT · Slides

Round the corners into a button

01 / 05

A link left alone is plain

On its own, <a> is just blue text with a line under it. Inside a paragraph that is fine, but it is weak when you want to say "press this one".

So rebuild it in CSS to look like a button.

02 / 05

First take the underline off

text-decoration: none; takes the line away. text-decoration is the property for the decoration on text, underlines and strikethroughs.

With the line gone, it starts reading as a part rather than as text.

.btn {  text-decoration: none;}

03 / 05

Puff it up with space

A link runs along with the text (it is inline), so make it display: inline-block; before you add padding.

padding: 12px 24px; is "12px top and bottom, 24px each side". A bit wider on the sides is what makes it look like a button.

.btn {  display: inline-block;  padding: 12px 24px;  background-color: #2f7d6f;  color: white;}

04 / 05

Round the corners

border-radius sets how rounded the corners are.

  • 4px to 8px … slightly round, the shape you see most now
  • 24px … swollen at both ends
  • 50% … on a square, a circle
.btn {  border-radius: 6px;}

05 / 05

Rounding works on any box

border-radius is not only for buttons. Use it on cards and pictures too; rounded corners alone give a softer impression.

Borders, background colours, rounding — put together what you have so far and build. Have a go.

.card {  border: 1px solid #dddddd;  border-radius: 8px;}