#15DaysOfCSS Day 8: Buttons and links

Style links as buttons for calls-to-action

On occasion, you'll want to draw attention to a specific link on the page. Donald Miller of Storybrand recommends a call-to-action (CTA) button in the top right of the web page, sometimes as part of the navbar. Other times, you'll want that "read more" link to look like a button.

Let's take a look at how to make links look like buttons. It's pretty easy to do, no frameworks required.

<button> vs <a>

You may know that there is an HTML <button> element designed for creating buttons for forms, and you might be thinking that this is the correct way to mark up a button-style link. However, you'd be incorrect!

The <button> element is designed for actions -- anything except for a link. Submit a form, cancel a form, or trigger a JavaScript event - these are all candidates for the <button> element.

However, links are links. If the goal of your button is to take the user elsewhere when the button is clicked, it's not a <button> -- it's a link instead.

Fortunately, it's pretty easy to style buttons from a link, so let's take a look at how we might do that.

Styling links as buttons

Since you want to click your "button" and visit another page, you've correctly marked up your HTML as a link.

<p><a href="#" class="button">A link that looks like a button</a></p>

Now it's simply a matter of styling that link to look button-ish. Generally speaking, there's a few styling elements to add to make a link look like a button:

• Give the link a background color and appropriate contrasting text color

• Turn off the underline on all states

• Set the <a> display value to block, to allow a larger clickable area, and set an appropriate width if needed

• Turn on padding so the text doesn't jam up against the edges

That code might look something like this:

.button {
  background-color: #20bf6b;
  color: white;
  text-decoration: none;
  display: block;
  padding: 0.5rem;
}

This gives you a big green button with white text (in this case) that looks pretty basic... but the button look is there!

Now, how might we take this to button-y heights?

• Box-shadows or gradients give it a 3D appearance

• Round the corners

• Set up a hover state that looks amazing

Adding these items to our button, here's how the code looks now:

.button {
  background: radial-gradient(circle, rgba(38,222,129,1) 35%, rgba(32,191,107,1) 68%);
  color: white;
  text-decoration: none;
  display: block;
  padding: 0.5rem;

  /* wide border radius on all 4 corners makes a pill */
  border-radius: 100px;

  box-shadow: 5px 5px 10px 1px rgba(136,136,136,0.5);
}

.button:hover {

/* invert colors in the gradient on hover */
    background: radial-gradient(circle, rgba(32,191,107,1) 35%, rgba(38,222,129,1) 68%);

/* reduce box shadow so it looks depressed */
  box-shadow: 0px 0px 10px 1px rgba(136,136,136,0.5);
}

There are all kinds of tricks to making buttons look like buttons, but these are a few you might consider if you want to make a button look extra clickable. We used cssgradients.io for the gradient generation and cssgenerator.org for creating the box shadow. These provide a visual interface for generating the desired effects, then give you the code to incorporate into your CSS.

🎉📚Get the #15DaysOfCSS e-book📚🎉

These #15DaysOfCSS posts will be compiled into an e-book — pre-order now!

Email is great, and blogs are awesome, but it can be challenging to use them as a reference in the future. We'll be assembling this month's work into an e-book.

🖥 Today’s CodePen example

Today’s CodePen example maps out the code described in this email.

👩🏽‍💻 Challenge: Button to the End of the Internet

👩🏽‍💻 Today’s challenge features a link that will take you to the end of the internet. Your task is to make the link look like a Very Consequential Button. It is the end of the internet, after all.

📚 More information and examples

📚 MDN: <button>

📽 LinkedIn Learning: HTML and CSS Creating Navigation Bars (subscription required)

📽 Flexbox and Grid version 2 at Frontend Masters (subscription required)