CSS Snippets: How to Create a Print Button

Screen Shot 2017-03-01 at 5.00.33 PM

One cool thing about CSS is that there are probably about one hundred different ways to use the styling language to make buttons, and this is probably because there are just so many different types of buttons to be created.

One of the most useful types of buttons you can make is the print button. When giving your user the option to print a page, you can use a boring old text link, OR you can spice things up by creating a beautiful, stylish, colorful button with hover effects. In this tutorial, you’ll learn how to make a cool looking print button that includes a Font Awesome icon for an extra pinch of style.

The HTML

Your HTML is going to be pretty straightforward. First, because we’re using a Font Awesome icon in this tutorial, you’re going to need to link to the Font Awesome library. You can do this either in your CSS using the @import rule, or you can insert the following tag into the <head> of your HTML — it doesn’t really matter which one you choose to do, as long as you don’t forget to do it. For this example, let’s just link to the library from our HTML file:

What's the one thing every developer wants? More screens! Enhance your coding experience with an external monitor to increase screen real estate.

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

The HTML code for your print button should look like this:

 <a href="" class="print"><i class="fa fa-print"></i>Print</a>

Without any styling added to it, this is what your code should look like so far:

Screen Shot 2017-03-01 at 5.05.36 PM

As you can see, the font icon we’re using (in the HTML it’s the <i> tag and we use the class to specify which Font Awesome we’re looking for) is one of a printer, so your user will definitely have no question what this clicking this button is going to do.

Now it’s time to add some style.

The CSS

We want to add some color, some dimension, and some sleekness to this print button. The following code does a fair job at achieving all of that:

@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700);

body{
    font-family: 'Source Sans Pro';
    background-color: #e4ecbd;
}

.container{
    width: 400px;
    margin: 0 auto;
}

a.print{
    text-decoration: none;
    display: inline-block;
    width: 75px;
    margin: 20px auto;
    background: #dc143c;
    background: linear-gradient(#e3647e, #DC143C);
    text-align: center;
    color: #fff;
    padding: 3px 6px;
    border-radius: 3px;
    border: 1px solid #e3647e;
}

i.fa.fa-print{
    margin-right: 5px;
}

Using only about 30 lines of CSS, we’ve managed to add a whole lot of style to our little text link. Instead of text, it now looks like a real button:

Screen Shot 2017-03-01 at 5.00.33 PM

We use a linear gradient combining two similar colors as the background of the button to give it that 3-Dimensional look so the design isn’t so flat. We also add some subtle border radius values to the button to add some softness to the harsh rectangular shape of the anchor tag. The bright color and the white font also help to really make the button pop and stand out on the light green background.

The only finishing touch we still need is a hover effect.

The Hover Effect

To add a hover effect to your button, add this line of code to the end of the CSS snippet above:

a.print:hover{
    background: linear-gradient(#DC143C, #e3647e)
}

This simple hover trick has a great effect. By swapping the linear gradient values of the background, the print button appears to be almost indented when its hovered upon in comparison to how it looks when the cursor is not over the tag. See the image below to check out the effect:

Screen Shot 2017-03-01 at 5.00.40 PM

This snippet is simple and super easy to implement, but it will really add a smooth, professional feel to any project its added to. A great and quick way to really freshen up your print links or buttons.

Author: Rishabh

Rishabh is a full stack web and mobile developer from India. Follow me on Twitter.

Leave a Reply

Your email address will not be published. Required fields are marked *

*