Pure CSS Buttons (With LESS)

My favorite part of web development is getting to the front end. There’s always something new and exciting to learn. Always. So, since I committed to writing at least one blog post a week I’m going to share with you my two favorite techniques for creating beautiful CSS buttons from links.

Lesson 1: Button with inset effect

It’s really hard to describe this one as it isn’t much different than the other. This button type is my new favorite though you’ll see me use way more of the second type for some reason. So let’s first start with the HTML needed for the button, which by the way looks like this:

Blue button

Step 1 – Create a link

1
<a href="#" class="blue-button">Get wrecked</a>

Simple so far, just a single line of HTML. Next up comes the CSS. But I don’t do things in normal CSS, especially when using CSS3 properties. Instead I save time by using LESS. They’re almost identical and you’ll pick it up as I go along if you’ve never come across LESS code before.

Step 2 – Prepare your mixins

In LESS, a mixin is like a function. Its a reuseable class that you declare once then use over and over in as many other declarations as you want. They’re huge time savers. Here are the LESS mixins we’ll need to complete both of our different buttons:

First, let’s start with the colors. Since we’re using LESS we can define some variables so we don’t have to remember hex codes:

Declaring Our LESS Color Variables
1
2
3
4
5
@white: #f7f7f7;
@blue: #095B90;
@dblue: #07466D;
@ltblue: #6DBDDE;
@fadedblue: #11A4FF;

Now, the mixins…

Our Reuseable Mixins
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
.border-radius (@radius: 10px) {
    -moz-border-radius: @arguments;
    -o-border-radius: @arguments;
    -ms-border-radius: @arguments;
    -khtml-border-radius: @arguments;
    -webkit-border-radius: @arguments;
    border-radius: @arguments;
}

.inset-shadow (@inset: inset, @x: 0, @y: 0, @blur: 5px, @color: #fff) {
  -o-box-shadow: @arguments;
  -moz-box-shadow: @arguments;
  -ms-box-shadow: @arguments;
  -khtml-box-shadow: @arguments;
  -webkit-box-shadow: @arguments;
  box-shadow: @arguments;
}

.text-shadow (@x: 0, @y: 0, @blur: 1px, @color: #fff) {
  -o-text-shadow: @arguments;
  -moz-text-shadow: @arguments;
  -ms-text-shadow: @arguments;
  -khtml-text-shadow: @arguments;
  -webkit-text-shadow: @arguments;
  text-shadow: @arguments;
}

/* This is one of the most important mixins but also the most complicated - I usually use Colorzilla's gradient generator for it. Just Google it */
.blue-gradient {
    background: #0d77ba;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzBkNzdiYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwOTViOTAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top,  #0d77ba 0%, #095b90 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0d77ba), color-stop(100%,#095b90));
    background: -webkit-linear-gradient(top,  #0d77ba 0%,#095b90 100%);
    background: -o-linear-gradient(top,  #0d77ba 0%,#095b90 100%);
    background: -ms-linear-gradient(top,  #0d77ba 0%,#095b90 100%);
    background: linear-gradient(to bottom,  #0d77ba 0%,#095b90 100%);
    filter: ~"progid:DXImageTransform.Microsoft.gradient( startColorstr='#0d77ba', endColorstr='#095b90',GradientType=0 )";
}

Those three classes are reusable and we will be using just one single line to add all that prefixed code to our .blue-button class.

Step 3 – Styling the button

In this step we’re going to use the mixins we defined earlier. This way, in the grand scheme of your entire CSS file if you were designing more than just a button, we’d save tons of space and have far more readable code. (Pro tip: if you split up your LESS code into files for typography, colors, and a reset and @import them, your life will be even easier!)

Here’s how we’re going to style our blue button class:

The Actual Button Styling
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.blue-button {
    font-family: Helvetica, Arial, sans-serif; /* We're not using the web font shown in the image */
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap; /* Prevents the button from wrapping lines and breaking up - good for multi-word links as buttons */
    padding: 10px 18px;
    color: @white;
    border: 1px solid @dblue;
    .border-radius(4px);
    .blue-gradient;
    .inset-shadow(inset, 0, 0, 0, @fadedblue);
    .text-shadow(0, 1px, 1px, @dblue);
}

Now you may be wondering what’s simple about this. Why didn’t I use just an image, declare some definite widths/heights and just be done with it. Well, first off, using images for buttons rarely looks very good. Very few sites pull it off well. Most of the time they end up looking pretty cheesy and lame. There’s something about pure CSS buttons that makes them feel real and inviting. Second, I only showed you the button code. Yes, I did write an awful lot of code for just one silly button but in fact all that code was not just for one silly button. Those mixins and color variables get reused many times throughout the stylesheet of the site they belong to.

Writing mixins saves us from having to prefix CSS3 styles over and over, it allows us to use the same styles on multiple elements by simply declaring one class inside another and at the same time we can even vary those styles by changing the mixin’s variables. Have you ever had to write certain tedious CSS rules throughout your stylesheets to support older browsers? Well LESS mixins are here to rescue you! And there’s a lot more it can do that even I haven’t gotten into yet. In a nutshell, LESS is awesome and has saved me days worth of work. Yes, days. (Plug: the mixins I used here are actually used so often that they’re part of my very own CSS framework, Fractionless Boilerplate)

Lesson 2: Button with a more 3D-ish effect

This button is very similar to the last with a few minor differences. The mixins are the same except for the colors and gradients so instead of rewriting them all, please refer to our mixins above and below I’ll declare anything that has changed.

The final product will look like this: Red button

Step 1: Create the HTML

Anchor Tag Styled as a Button
1
<a href="http://fractionless.info" class="red-button">Start the party</a>

Step 2: Mixins (again)

Only one mixin has changed here and that’s our gradient. We’re also declaring new colors for this button:

Color Variables and the Gradient Mixin
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@white: #f7f7f7;
@red: #A73E24;
@wred: #B03519;
@dred: #692111;

.red-gradient {
    background: #ff4d26; /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmNGQyNiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNiMDM1MTkiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top,  #ff4d26 0%, #b03519 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff4d26), color-stop(100%,#b03519)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #ff4d26 0%,#b03519 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #ff4d26 0%,#b03519 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #ff4d26 0%,#b03519 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #ff4d26 0%,#b03519 100%); /* W3C */
    filter: ~"progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff4d26', endColorstr='#b03519',GradientType=0 )"; /* IE6-8 */
}

Step 3: Style yo’ button foo!

Button Styles
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.red-button {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    border: 1px solid @dred;
    padding: 10px 18px;
    .border-radius(4px);
    .inset-shadow(inset, 0, 1px, 0, @wred);
    .text-shadow(0, 1px, 1px, @dred);
    .red-gradient;
}

And there you have it. It’s almost the same effect as the first button but it gives off the impression that it’s at a very very slight angle.

Side Note:

I made a commitment to myself to blog at least once a week for the next year. This blog doesn’t have any set of standard topics so I’d appreciate it if anyone who’s reading would leave a comment and tell me if I should write more about web development or entrepreneurship, or philosophy, or whatever. I’m sure over time patterns will emerge but right now I could use some suggestions as to what people would like to read about. Thanks.

Web Development

« Personal Identity and The Smashing Pumpkins When is it Okay for a Complete Code Rewrite? »

Comments