How to add custom font buttons in HTML

April, 2018

Ever wondered how people make their buttons look so fancy? You can add CSS to buttons, or instead upload images and give them the action of the button which is far easier (in my opinion)!

1. First find a font you like on 1001 Fonts and download it

2. Find the zip folder and extract the files

3. Open the TrueType font file and install it

4. Create a new file in Photoshop and start typing with the Horizontal Type Tool

5. You can add a border box or any other shapes/images you want here.

6. Hihglight the text and change the font in properties, to the one you just downloaded

7. Then find where you want to insert the button in your website and type the following code:

<a href="clients">
<img src="client-work-button.jpg"
alt="client"width="200px"></a href> </a>

In the above code, the first line says where you want the button to take the user.

The second line, is the image source (what you saved your photoshop image as) as well as the size of the button

That's it! Super simple way to customise your buttons and change the look of your site completely!