Simple HTML Button Code (New design) - Step by Step Guide with Pictures. Free!


I spent hours searching online for a simple HTML button that I could paste into my website. All I could find were buttons that grew longer as I added in extra text to them, but that wasn’t what I wanted. So in the end, I gave up the search and decided to make my own code!

Then I decided I wanted more. I wanted a simple button that I could change just about everything on so that I could amend it accordingly for every website that I made in the future. Several days later, lots of coffee and here it is!


*Free for you to use and manipulate. No backlink is required.*

This is what the button looks like at the moment, but you can change it!
This is what the button looks like at the moment, but you can change it!

What can you do with this HTML Button Code

  • Change the size of the button (height and width)
  • Change the text appearance (bold/ italic/ font/ size and colour)
  • Align text (left, right or centre)




  • Link to a webpage within your website
  • Link to a page outside of your website
  • Change the background colour of the button



Click image to enlarge
Click image to enlarge

HTML Code For Button


If you can already look at this code and know what to do with it then please feel free to copy it and get straight back to building your masterpiece. If not, then all will be explained below.

<html>

<body>

<a href="http://feelgoodaboutyourself.weebly.com/contact.html">

<button style="background-color: #99C7FF; height: 35px; width: 160px; font: bold italic 16px Arial; color: #000000;"><div align="centre">Enter Text Here! </div></button></a>

</body>

</html>

Step-By-Step Guide


I know from my search that some of you are struggling to get your buttons to link to other pages so I'll begin with linking.


Click image to enlarge
Click image to enlarge

Linking this button to an internal page within your website


To link this button to a page within your website you will need to change the section that is bolded below or (see highlighted picture).


<html>

<body>

<a href=" http://freepoems2share.weebly.com/halloween.html">

<button style="background-color:#99C7FF; height: 35px; width: 160px;

font: bold italic 16px Arial; color:#000000;"><div align="centre">Enter Text Here!</div></button></a>

</body>

</html>


All html links begin with http:// so ensure you leave it at the beginning.

As this is an internal link you leave out www. and put .html at the end instead. You will also need to use the forward slash to indicate different pages too.

For eg, your homepage will be something like http://mywebsite.com/index.html

Another page in your website could be http://mywebsite.com/contact-me.html


Note: You cannot use blank gaps when creating a link in html. Notice on my previous example on the contact-me part I am using a middle dash (-). Depending on what you have named your page will depend if you need to use a middle dash or and underscore (_).

So it would be either contact-me or contact_me.


Still can't get it to work? Try changing the .html to just .htm some sites will vary.


Click image to enlarge
Click image to enlarge

Linking this button to an external page outside of your website


Unlike linking to internal webpages, you must use www. along with the http:// when linking to an external website. You do not need to use .html at the end of the web address.


<html>

<body>

<a href="http://www.google.com">

<button style="background-color:#99C7FF; height: 35px; width: 160px; font: bold italic 16px Arial; color:#000000;"><div align="centre">Enter Text Here!</div></button></a>

</body>

</html>



Click image to enlarge
Click image to enlarge

Changing the button background colour


Paste in the colour code of your choice in the place of the bolded texted below. Or alternatively you can delete #99C7FF and type in your colour of choice, such as lightblue, red, yellow etc.


<html>

<body>

<a href="http://www.google.com">

<button style="background-color: #99C7FF; height: 35px; width: 160px; font: bold italic 16px Arial; color:#000000;"><div align="centre">Enter Text Here!</div></button></a>

</body>

</html>



Click image to enlarge
Click image to enlarge

Changing the size of the Button


Change only the numbers next to height and width to change the size of your button. See Picture.


<html>

<body>

<a href="http://www.google.com">

<button style="background-color: #99C7FF; height: 35px; width: 160px; font: bold italic 16px Arial; color:#000000;"><div align="centre">Enter Text Here!</div></button></a>

</body>

</html>



Click image to enlarge
Click image to enlarge

Changing the button text style - Bold or Italic


You can simply delete the word bold or italic or both if you do not want your text to be shown in this way on your button face.


<html>

<body>

<a href="http://www.google.com">

<button style="background-color: #99C7FF; height: 35px; width: 160px; font: bold italic 16px Arial; color:#000000;"><div align="centre">Enter Text Here!</div></button></a>

</body>

</html>



Click image to enlarge
Click image to enlarge

Changing the size, font and colour of your button text


You can change the size of the text you want to display on your button, what type of font and what colour you want your text to be.

Changing the number 16px to another will change the size of your button text.

Replacing Arial with a font of your choice such as Verdana, Times New Roman or Comic Sans MSwill change the writing style.

Changing the color: #000000 to another colour code will change the colour of your button text. Or you can delete #000000 and type in your colour choice such as yellow, red or blue etc. Please note this is not background-color.


<html>

<body>

<a href="http://www.google.com">

<button style="background-color: #99C7FF; height: 35px; width: 160px; font: bold italic 16px Arial; color: #000000;"><div align="centre">Enter Text Here! </div></button></a>

</body>

</html>



Click image to enlarge
Click image to enlarge

Aligning your button text left, right or in the centre


If you want to align your button text to the left or right then replace the word “centre” with the word “left” or “right”.


<html>

<body>

<a href="http://www.google.com">

<button style="background-color: #99C7FF; height: 35px; width: 160px; font: bold italic 16px Arial; color: #000000;"> <div align="centre"> Enter Text Here! </div></button></a>

</body>

</html>



Click image to enlarge
Click image to enlarge

Adding your text to the button



Now that you’ve got your button looking all up to scratch, all that is left to do is add the text of your choice.

Replace the writing Enter Text Here! with the text of your choice or whatever text is relevant to where your button is linking to.


<html>

<body>

<a href="http://www.google.com">

<button style="background-color: #99C7FF; height: 35px; width: 160px; font: bold italic 16px Arial; color: #000000;"> <div align="centre"> Enter Text Here! </div></button> </a>

</body>

</html>


~
~

Try it for yourself!


Lots of people are put off by the letters HTML. The great thing about this bit of code is not only can it be used by people with the technical know-how who can build a website from scratch, but it can also be used by people with very little HTML knowledge at all.

It can be used in many site builders or even blogs such as Weebly and moonfruit. Really all that is required is pasting this code into the HTML section that they offer, change it to look the way you want it to as illustrated here and you're done!

The website www.w3schools.com is brilliant for practicing and learning HTML and boasts a great ‘Try it yourself’ page. Go ahead have a play around with this button code. Delete the code already there on the try it yourself page and paste in this button code. Hit the ‘edit and click me’ button on the left-hand side and your button will appear in the right-hand box. Change some of the stuff you've just learn't here.

Note: You can even click on your new button if you've linked it somewhere and it will open up the page in the right-hand box. However, it doesn't bring up search engines such as google or yahoo. They will work on your website, just not on the 'try it yourself', so type in something different such as www.weebly.com or www.hubpages.com


Links to an Internal page. Copy this code:

<html>

<body>

<a href=" http://freepoems2share.weebly.com/halloween.html">

<button style="background-color:#99C7FF; height: 35px; width: 160px;

font: bold italic 16px Arial; color:#000000;"><div align="centre">Enter Text Here!</div></button></a>

</body>

</html>

Here's some basic colour codes you can try

 
 
Yellow #E9FD06
White #FFFFFF
Blue #0623FD
Green #24DE14
Red #FD0606
Black #000000

Links to an external page. Copy this code:

<html>

<body>

<a href="http://www.hubpages.com">

<button style="background-color:#99C7FF; height: 35px; width: 160px; font: bold italic 16px Arial; color:#000000;"><div align="centre">Enter Text Here!</div></button></a>

</body>

</html>


Some rights may be reserved © Victoria Stephens



More by this Author


Comments 2 comments

Victoria Stephens profile image

Victoria Stephens 4 years ago from London Author

Hi Kashmir56!

Very much appreciate your feedback and as always for you stopping by. This code can be used by anyone even if they have very little knowledge of HTML. I've added a section to this article after reading your comment, called 'try it for yourself' so that people can see just how easy this code really is if they want to and have a little play around with it.

Take care my friend.xxx


kashmir56 profile image

kashmir56 4 years ago from Massachusetts

Hi my friend, great information and so well explained and illustrated . I don't know if i will ever need this but have booked marked it just in case.

Vote up and more !!!

    Sign in or sign up and post using a HubPages Network account.

    0 of 8192 characters used
    Post Comment

    No HTML is allowed in comments, but URLs will be hyperlinked. Comments are not for promoting your articles or other sites.


    Click to Rate This Article
    working