Buttons

February 04, 2024 | Work: 2024-01

Say you had this link:

<a href="javascript:void(0);" class="demo-link">Listen on Spotify</a>

mk 1 Listen on Spotify

But wanted to make it look super cool, be more “dynamic” and “make it pop.” That’s a thing we do, right? Make things pop?

The first thing I would probably do is contain it in a shape, and lean on the affordance of “buttons are shapes that people know they can click on”:

.demo-link {
  display: inline-block;
  padding: 1rem;
  margin: 0;
  border: 0.5px solid #666;
}

mk 2 Listen on Spotify

We might as well give it a nice traditional button treatment, right? Round the corners, apply some brand coloring…

.demo-link {
  display: inline-block;

  padding: 1rem;
  margin: 0;

  border: 0.5px solid #666;
  border-radius: 4px;
  border-color: #fff;

  font-weight: bold;
  background-color: #e91ed7;
  color: #fdff00;
}

mk 3 Listen on Spotify

Let’s do a sweet background icon to make it look more legit. I found a spotify icon on the web, sized it down (200x200), made the background transparent, and exported it as a PNG.

.demo-link {
  display: inline-block;

  background: url({...}/spotify-icon.png) no-repeat;
  background-position: 0.5rem;
  background-size: 2rem;

  padding: 1rem 1rem 1rem 3rem;
  margin: 0;

  border: 0.5px solid #666;
  border-radius: 4px;
  border-color: #fff;

  font-weight: bold;
  background-color: #e91ed7;
  color: #fdff00;
}

mk 4 Listen on Spotify

This looks pretty great. But we really want to wow the client. Let’s make the color invert on hover.

.demo-link {
  display: inline-block;

  background: url({...}/spotify-icon.png) no-repeat;
  background-position: 0.5rem;
  background-size: 2rem;

  padding: 1rem 1rem 1rem 3rem;
  margin: 0;

  border: 0.5px solid #666;
  border-radius: 4px;
  border-color: #fff;

  font-weight: bold;
  background-color: #e91ed7;
  color: #fdff00;
}
.demo-link:hover {
  background-color: #fdff00;

  color: #8f6afd;
}

mk 5 Listen on Spotify

Soften the change with a transition…

.demo-link {
  display: inline-block;

  transition: 0.5s;

  background: url({...}/spotify-icon.png) no-repeat;
  background-position: 0.5rem;
  background-size: 2rem;

  padding: 1rem 1rem 1rem 3rem;
  margin: 0;

  border: 0.5px solid #666;
  border-radius: 4px;
  border-color: #fff;

  font-weight: bold;
  background-color: #e91ed7;
  color: #fdff00;
}
.demo-link:hover {
  transition: 0.5s;

  background-color: #fdff00;

  color: #8f6afd;
}

mk 6 Listen on Spotify

So close! Let’s really blow their minds and make the icon grow in response to hover as well:

.demo-link {
  display: inline-block;

  transition: 0.5s;

  background: url({...}/spotify-icon.png) no-repeat;
  background-position: 0.5rem;
  background-size: 2rem;

  padding: 1rem 1rem 1rem 3rem;
  margin: 0;

  border: 0.5px solid #666;
  border-radius: 4px;
  border-color: #fff;

  font-weight: bold;
  background-color: #e91ed7;
  color: #fdff00;
}

.demo-link:hover {
  transition: 0.5s;

  background-size: 5rem;
  background-position: -2.25rem;
  background-color: #fdff00;

  color: #8f6afd;
}

mk 7 Listen on Spotify