How To Make A Button Copycat

A few of the CSS properties we have covered can be combined to make a link which looks just like a button.

We are creating a button copy cat then.

This is exactly what we will be creating

If a link looks a lot like a button, you are giving clear direction to your user by letting them know where to click. It looks quite good too.

First, let’s create our link in HTML before we start styling it. Don’t forget to give the link a class or an ID for your CSS to use.

        <a class="copycat" href="www.codingforcats.com">
        <p class="copycat-text">Pat Here Please</p>
        </a>
      

In this example, as we might want several copycat buttons, this HTML uses classes rather than IDs.

Styling needs to be applied to both the link element and the paragraph element inside it and so both parts need classes.

Let’s start with the CSS which needs to be applied to the copycat-text element.

You’ll notice our button sits in the middle of the page but does not take up the whole width of it. To do this, we need to set the size of the button.

        height: 40px;
        width: 40%;
      

With the width set to just 40%, we can work out the margins needed to place the button in the middle of the page.

While Aria is very small, she often lies in the middle of the bed leaving equal space either side of her.

To ensure there is equal space to the sides of your button we need to use half of the remaining margin and assign it to each side of the button.

Right, we did this before.

You start with 100% and take away the width of the HTML element.

That’s right.

100% - 40% = 60%

Then you split this in two so the space either side is the same.

60% / 2 = 30%

Well remembered!

Thanks. I can hear the sofa calling to me. Specifically the middle of the sofa.

The middle of the sofa is always the most comfortable

Setting our left and right margin to 40% looks like this.

        margin-left: 30%;
        margin-right: 30%;
      

We’ve made an effort to make sure the button sits in the middle of the page, so it makes sense to add one more line of CSS so that the text sits in the middle of the button.

This makes the button look neater, more modern and more complete. It also draws more attention to the button and the words on it.

To do this, simply use the text-align property with the value center to place the text in the middle of the button.

        text-align: center;
      

Even though we have set the size and position of our copycat button, it isn’t clear where it starts and where it finishes and so, other than the text, it isn’t clear where the user can click. It will be helpful if we added a background colour to make this clearer.

Well we all know there is one option here.

Blue?

Close.

Well, not really.

        background-color: salmon;
      

Of course?

A finishing touch that really gives this copycat the authentic, modern button look is giving it round corners. We don’t need to add a border around the element; instead we can just set the border-radius property to round the corners.

        border-radius: 10px;
      

This is the final CSS for the paragraph element copycat-text:

        .copycat-text {
        	height: 40px;
        	width: 40%;
        	text-align: center;
        	margin-left: 30%;
        	margin-right: 30%;
        	background-color: salmon;
        	border-radius: 10px;
        }
      

Here is what our copycat button looks like so far:

The next few steps cover adding CSS to the link element which surrounds the copycat-text element. These changes finish off the look of our copycat button by making it much clearer and easier to read.

To make our text stand out even more against the salmon coloured background, let’s make it white, bigger and bolder.

As much as I obviously love the salmon colour we use all the time, sometimes as a background colour it makes dark text difficult to read.

Remember, text colour is set with the simple color property and to make text more chunky you use the font-weight property. The size of your text is set with the font-size attribute. Here is our code for these changes.

        color: white;
        font-size: 24px;
        font-weight: bold;
      

One final touch, which was covered in the last post, is to remove the underline that comes with every link by default.

The link underline is added to make it obvious to the user that the text is a link which can be clicked, but as we have added lots of CSS to make this link look like a button, this underline isn’t necessary; it’s obvious that this copycat link should be clicked.

To do this, use the text-decoration property and set the value to none, as we want to show no underline on this element.

        text-decoration: none;
      

Here is the full CSS for the copycat element:

        .copycat {
        	text-decoration: none;
        	color: white;
        	font-size: 24px;
        	font-weight: bold;
        }
      

Now that there is CSS for both the link element and the paragraph element inside it, there is no more CSS to add. This is the full finished code:

        CSS
        <style>
        	.copycat-text {
        		height: 40px;
        		width: 40%;
        		text-align: center;
        		margin-left: 30%;
        		margin-right: 30%;
        		background-color: salmon;
        		border-radius: 10px;
        	}
        
        	.copycat {
        		text-decoration: none;
        		color: white;
        		font-size: 24px;
        		font-weight: bold;
        	}
        </style>
        HTML
        <body>
        	<a class="copycat" href="www.codingforcats.com">
        	<p class="copycat-text">Pat Here Please</p>
        	</a>
        </body>
      

And here is the finished product:

Am I going to have to do this for every button I want on my website?

There is a specific HTML tag for creating a button, but there isn’t much point knowing it until we have covered JavaScript as without Javascript your button will be useless. It won’t do anything, like Aria when it’s sunny.

I was just asking no need to get personal!

I’m sorry.

Anyway, what are you going to do now?

Well, it’s pretty nice outside. Might go lay down outside.

Typical.

Without Javascript any buttons on your website which use the specific button tag won’t do anything, however using this code you can add a functional link that looks just like a button.

There are a lot of CSS properties used here. To revisit any particular one to learn more, or just to remind yourself of some of the alternate values, use these useful links:

Hopefully this illustrates that while each CSS property is useful, it is really when they are used in combination that parts of your website really come alive.

Use the boxes below to experiment with these CSS properties and create your very own copycat button.

        #copycat-practice { 
        text-decoration: 
        color: 
        font-size: 
        font-weight: 
        }
        #copycat-text-practice { 
        height: 
        width: 
        margin-left: 
        margin-right: 
        text-align: 
        background-color: 
        border-radius: 
        }