Link Changed! Blame it to CSS3

Nerdy Nathan's picture
css3-button-thefluffyheads.jpg

Are you still using plain text links on your website, because converting them into buttons will make your site load slower? I guess you haven't heard of CSS3.

Designers are really pumped up when it comes to CSS3 because this version's still new and not fully matured yet. Not all browsers support CSS3. In fact, only Chrome, Firefox3.6+, Safari4+ and Opera10+ support this spec. Internet Explorer 10 has promised to catch up with this change later.

The new version of Cascading Style Sheet offer further styling to your web elements with the cost of spending a very little amount of bandwidth. Our Dilemma in the past is that when we make buttons out of links, we often use images that will serve as backgrounds to these buttons. These images become bulky when summed up and thus make your website load slower. That's why some of us rather go on just making plain text links for the site to load faster. Sorry, but these plain text links are not that inviting to clicked on and makes your site a bit less interactive if ever.

To take your links further when it comes to design, we take advantage of the features CSS3 is giving us. With these features we can turn this markup...

<a  href="#" class="link-to-button">
  <span class="label-container">Click Me</span>
</a>

..into looking like a button that has more interactivity into it. Take note that there are no images and javascript involved in this.

button-states-thefluffyheads.jpg

How to do it

Now this is a tutorial indeed. I will teach you how to make your links look like buttons without applying any image nor any javascript into it. CSS3 is simply enabling us to do it. The image below will show the things that will be going to style for the link for it to look more alive and inviting to click.

button-anatomy-thefluffyheads.jpg

a.link-to-button  {
  /* Positioning and Size */
  display: inline-block;
  margin: 0;
  padding: 0;
  height: 2.4em;
 
  /* Typography */
  font: bold 1em/1em Arial, Helvetica, sans-serif;
  color: white;
  text-decoration: none;
  text-shadow: 0 -1px 0 #0dabbb;
 
  /* Background */
  background: #a1e7fc; /* Old browsers */
  background: -moz-linear-gradient(top,  #a1e7fc 0%, #53cbf1 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a1e7fc), color-stop(100%,#53cbf1)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #a1e7fc 0%,#53cbf1 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #a1e7fc 0%,#53cbf1 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #a1e7fc 0%,#53cbf1 100%); /* IE10+ */
  background: linear-gradient(to bottom,  #a1e7fc 0%,#53cbf1 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a1e7fc', endColorstr='#53cbf1',GradientType=0 ); /* IE6-9 */
 
  /* Border */
  border: 1px solid #20aaaa;
  border-radius: 2px;    /* W3C */
  -moz-border-radius: 2px;  /* FF3.6+ */
  -webkit-border-radius: 2px;    /* Chrome,Safari4+ */
 
  /* Shadow */
  box-shadow: 0 1px 2px #bbb;  /* W3C */
  -moz-box-shadow: 0 1px 2px #bbb;   /* FF3.6+ */
  -webkit-box-shadow: 0 1px 2px #bbb;  /* Chrome,Safari4+ */
}

Take note that gradient backgrounds can only be applied on block type elements. This is because elements that are displayed as blocks have an area on which a background can be placed. Other stuffs we applied are text shadows, rounded corners, block shadows and element states. Some style attributes require browser prefixes at the meantime. You can search for the prefixes if ever you feel like doing a CSS3 feature that is not in this tutorial.

The idea is that the button will look like as if it is really touched by a hand. That's what the different states do. To make different styles out from the different condition the button is having (normal, hovered and active/clicked).

Links have the tendency to change their text colors once visited so it is necessary to specify that there will be no change to be applied on visited links.

a.link-to-button:visited {
  color: white;
}

The hovered button will only lose some of it's shadows and making it look as if it is pressed towards the wall.

a.link-to-button:hover {
  cursor: pointer;
 
  box-shadow: 0 0 2px #ccc;
  -moz-box-shadow: 0 0 2px #ccc;
  -webkit-box-shadow: 0 0 2px #ccc;
}

The button should look pressed when clicked. To do this, we take away the gradient background and replace a solid color.

a.link-to-button:active {
  background: #53cbf1;
}

Lastly, there is a span placed inside the link. That span element will contain the label of the link and can be used to put up a top gloss to the button. This is to make the button look more real as if light is hitting it.

span.label-container {
  display: block;
  padding: 10px 20px;
  border-top: 1px solid #DCFDF8;
 }

We now have our link transformed into a wonderful button. Pretty neat isn't it?

Conclusion

Enhancing our User Interface really helps in promoting our sites well. Although this is not as important as the contents of your site, people still will really remember your website on how it looks. So making your site a bit more beautiful will really help you and what we just did is one big part of it. We did not sacrifice performance that much for out link to go further with it's design. With this new feature of the web, we can now have better looking sites without having that much of an issue of performance.

We just finished one exciting tutorial on how to make your links more beautiful. That's all for now fluffy buddies! Let's keep ours stuffed~