ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel

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

Updated on February 3, 2016


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



Comments

    0 of 8192 characters used
    Post Comment

    • Victoria Stephens profile imageAUTHOR

      Victoria Stephens 

      6 years ago from London

      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

      Thomas Silvia 

      6 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 !!!

    working

    This website uses cookies

    As a user in the EEA, your approval is needed on a few things. To provide a better website experience, hubpages.com uses cookies (and other similar technologies) and may collect, process, and share personal data. Please choose which areas of our service you consent to our doing so.

    For more information on managing or withdrawing consents and how we handle data, visit our Privacy Policy at: https://hubpages.com/privacy-policy#gdpr

    Show Details
    Necessary
    HubPages Device IDThis is used to identify particular browsers or devices when the access the service, and is used for security reasons.
    LoginThis is necessary to sign in to the HubPages Service.
    Google RecaptchaThis is used to prevent bots and spam. (Privacy Policy)
    AkismetThis is used to detect comment spam. (Privacy Policy)
    HubPages Google AnalyticsThis is used to provide data on traffic to our website, all personally identifyable data is anonymized. (Privacy Policy)
    HubPages Traffic PixelThis is used to collect data on traffic to articles and other pages on our site. Unless you are signed in to a HubPages account, all personally identifiable information is anonymized.
    Amazon Web ServicesThis is a cloud services platform that we used to host our service. (Privacy Policy)
    CloudflareThis is a cloud CDN service that we use to efficiently deliver files required for our service to operate such as javascript, cascading style sheets, images, and videos. (Privacy Policy)
    Google Hosted LibrariesJavascript software libraries such as jQuery are loaded at endpoints on the googleapis.com or gstatic.com domains, for performance and efficiency reasons. (Privacy Policy)
    Features
    Google Custom SearchThis is feature allows you to search the site. (Privacy Policy)
    Google MapsSome articles have Google Maps embedded in them. (Privacy Policy)
    Google ChartsThis is used to display charts and graphs on articles and the author center. (Privacy Policy)
    Google AdSense Host APIThis service allows you to sign up for or associate a Google AdSense account with HubPages, so that you can earn money from ads on your articles. No data is shared unless you engage with this feature. (Privacy Policy)
    Google YouTubeSome articles have YouTube videos embedded in them. (Privacy Policy)
    VimeoSome articles have Vimeo videos embedded in them. (Privacy Policy)
    PaypalThis is used for a registered author who enrolls in the HubPages Earnings program and requests to be paid via PayPal. No data is shared with Paypal unless you engage with this feature. (Privacy Policy)
    Facebook LoginYou can use this to streamline signing up for, or signing in to your Hubpages account. No data is shared with Facebook unless you engage with this feature. (Privacy Policy)
    MavenThis supports the Maven widget and search functionality. (Privacy Policy)
    Marketing
    Google AdSenseThis is an ad network. (Privacy Policy)
    Google DoubleClickGoogle provides ad serving technology and runs an ad network. (Privacy Policy)
    Index ExchangeThis is an ad network. (Privacy Policy)
    SovrnThis is an ad network. (Privacy Policy)
    Facebook AdsThis is an ad network. (Privacy Policy)
    Amazon Unified Ad MarketplaceThis is an ad network. (Privacy Policy)
    AppNexusThis is an ad network. (Privacy Policy)
    OpenxThis is an ad network. (Privacy Policy)
    Rubicon ProjectThis is an ad network. (Privacy Policy)
    TripleLiftThis is an ad network. (Privacy Policy)
    Say MediaWe partner with Say Media to deliver ad campaigns on our sites. (Privacy Policy)
    Remarketing PixelsWe may use remarketing pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to advertise the HubPages Service to people that have visited our sites.
    Conversion Tracking PixelsWe may use conversion tracking pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to identify when an advertisement has successfully resulted in the desired action, such as signing up for the HubPages Service or publishing an article on the HubPages Service.
    Statistics
    Author Google AnalyticsThis is used to provide traffic data and reports to the authors of articles on the HubPages Service. (Privacy Policy)
    ComscoreComScore is a media measurement and analytics company providing marketing data and analytics to enterprises, media and advertising agencies, and publishers. Non-consent will result in ComScore only processing obfuscated personal data. (Privacy Policy)
    Amazon Tracking PixelSome articles display amazon products as part of the Amazon Affiliate program, this pixel provides traffic statistics for those products (Privacy Policy)