How to create a custom button for your site

Buttons are a great way to make a CTA stand out. Click through to learn how to create a custom button with HTML & CSS so you can easily change text & re-use them.

I’ve got some CSS love for your site today. Buttons are a great way to make a call-to-action stand out, but instead of using images, use some HTML & CSS so you can easily re-use your buttons, even if you change the text.

Insert a link on your page, and add a class to the code to read something like this:

<a href="url" class="button">Text of button</a>

Then, create a child theme if you haven’t done so already.

Note: Some themes may already have styling for buttons. You may want to see how your theme’s default buttons looks before you add your own styling. Commonly used classes for buttons are .button and .btn.

Create a custom button: Styling it with CSS

Open the style.css file of your child theme, and add some styling for your button:

.button {}

This tells the browser to show any element with a class of button to use the styles defined between the curly brackets. In between the curly brackets, play around with a combination of these to create the style you like:

background-color can be transparent or any color you like. You can also use background-image, but make sure it's not too busy. Above all, the text on your button should be easy to read.

Example: background-color: #000; (black)

color will be the color of the text on your button, and also the color of the border if you don't define a separate border color.

Example: color: #fff; (white)

border is actually a combined property, in which you set the width, style and color of the border, for example 1px solid #e00e9d.

The style (“solid”) can be dotted, dashed, solid, double (needs to be at least 3px to see the effect), groove (at least 2px), ridge, inset or outset. Example: border: 1px dotted #f00; (red)

border-radius creates rounded corners on your buttons. If you set just one value, it'll round all corners, but you can also set multiple values to create different effects on the rounded corners, for example border-radius: 5px 0 would create rounded corners on the top left and bottom right, with square corners on the top right and bottom left. You can define up to 4 values (in the order top-left, top-right, bottom-right, bottom-left), if you define less than 4, it'll repeat itself, so 5px 0 shows as 5px 0 5px 0. You can also define 3, for example 5px 0 10px would show as 5px 0 10px 0. (the 4th repeats the 2nd).

Example: border-radius: 5px; (all corners rounded)

box-shadow allows you to create a shadow under or inside your button. Values are horizontal position, vertical position, blur (optional), spread (optional) and color (optional, default is black). For the horizontal and vertical positions, positive values (i.e. 10px) push it to the right (horizontal) and bottom (vertical), negative values can be used to position the shadow in the opposite direction.

box-shadow: 10px 10px; (will create a harsh black shadow under your button, pushed 10px to the right and bottom).
box-shadow: -10px -10px 5px #f00; (will create a blurred red shadow under your button, pushed 10px to the left and top).

font-family, font-size and font-weight can be used to style the text of your button. If you don't set these, the button uses the default text styles of your site (or the container element the button is located in).
letter-spacing can be used to spread out the letters a little bit.
padding adds space inside the button (if you have a border, this is space between the text and the border)
margin adds space outside the button (if you have a border, this is space between the border and elements surrounding your button).
text-decoration can be none, underline, overline or line-through. (Please don't use line-through, it'll make the text harder to read).
text-transform can be used to automatically change the text in your button to lowercase, uppercase or capitalize, so no matter how you input the text on your button, it'll change to uppercase (if you set this to uppercase). Lowercase will set all letters to lowercase, uppercase will set all letters to UPPERCASE, and capitalize will Capitalize The First Letter Of Each Word.

Also add some styling to change the look of the button when someone hovers (mouse over) it using

.button:hover {}

It’ll automatically take the styling from .button, so only add the styling you want to be different on hover.

Create a custom PayPal button

If you’ve chosen PayPal to get paid online, you can use this to create a custom PayPal button. Keeping the code above the same, you only need to edit the URL. You’ll need to set up a product (which can be anything as long as it has a name and a price). To do so, go to Seller preferences. Then click the Update link for Paypal buttons. Click Create new button (or update an exisiting one by using the Action dropdown for existing buttons).

For products, you’ll want to use the Buy Now button type. Input the product name in Item name, set the price and go through the steps. You can skip 2 if it’s not a physical item, but make sure the Save button at Paypal is checked so you can edit the button later. With the Customize advanced features, you can add URLs to pages on your website when people have finished the payment process (and also a different page if they cancel).

Click Create button.The URL you need is in the Email tab. You can simply use that URL in the button code to create your own custom PayPal button.

Get the PayPal URL from the Email tab

I’d love to see the button you created! Share your site & show off your custom button.

Get your Website Strategy Workbook to improve your website and turn more visitors into clients.


Click the button below to get it, free!