Noor's Plugin

WordPress Plugins, Themes, Hosting, Tutorials & more!

  • Home
  • Plugins
    • Themes
  • Hosting
  • Contact
    • Privacy Policy
  • About

How to Create an HTML Button Link

There are 4 ways to create an HTML button link – using an HTML form with a href attribute and an onclick event, styling directly with inline CSS, styling with an internal style sheet and styling with an external style sheet. In this article, I will show you all 4 of these methods so you can easily create an HTML button link for your website.

Using an HTML form

This is the easiest way to create an HTML button link. First, you need to create an HTML <form> and the button will be automatically generated for you. Then you include an onclick event in it where you instruct the button to go to a specific URL when clicked.

HTML Button Link Code

This is the code for the HTML button link. You need to copy and paste as plain text in order for it to function properly.


<form>
<input type="button" value="Click Here" onclick="window.location.href='http://example.com/test-page'"/>
</form>

Here, http://example.com/test-page is the URL to which you want to send the user when this button is clicked. Make sure to replace it with your own URL.

This is how the button looks like on the frontend of your website when you use the code above.

screenshot showing an html button link created in a form

Styling with inline CSS

With this method, you create the button first and style it with inline CSS.

HTML Button Link Code


<form>
<input style="width: 300px; padding: 20px; cursor: pointer; box-shadow: 6px 6px 5px; #999; -webkit-box-shadow: 6px 6px 5px #999; -moz-box-shadow: 6px 6px 5px #999; font-weight: bold; background: #ff8d00; color: #000; border-radius: 10px; border: 1px solid #999; font-size: 150%;" type="button" value="Click Here" onclick="window.location.href='http://example.com/test-page'" />
</form>

This is how the button looks like when you use the code above.

screenshot showing an html button link created in a form with inline css

Using an Internal Style Sheet

This method is much cleaner as the CSS code comes from an internal style sheet. The code is added to the header of your website.

HTML Button Link Code

The main difference is that you add a class attribute to the button and define the CSS rules for it in the style sheet.

<form>
<input class="demobutton" type="button" value="Click Here" onclick="window.location.href='http://example.com/test-page'"/>
</form>

CSS Code


<head>
<style>
input.demobutton {
width: 300px;
padding: 20px;
cursor: pointer;
font-weight: bold;
font-size: 150%;
background: #0d3179;
color: #fff;
border: 1px solid #3366cc;
border-radius: 10px;
}
input.demobutton:hover {
color: #ffff00;
background: #000;
border: 1px solid #fff;
}
</style>
</head>

This is how the button looks like when you use the code above.

screenshot showing an html button link created in a form with a style sheet

As you can see the code for the hover effect has also been added for the button.

Using an External Style Sheet

This method is very similar to the previous one. The only difference is that the rules come from an external style sheet or CSS file. This is very useful when you are looking to embed HTML button links with similar CSS on other pages of your website.

For this method, you need to create an external style sheet and place the CSS code in it. The style sheet then can be included on every page of your website (or pages where you wish to embed these buttons).

CSS Code


<style>
input.demobutton {
width: 300px;
padding: 20px;
cursor: pointer;
font-weight: bold;
font-size: 150%;
background: #0d3179;
color: #fff;
border: 1px solid #3366cc;
border-radius: 10px;
}
input.demobutton:hover {
color: #ffff00;
background: #000;
border: 1px solid #fff;
}
</style>

That’s it! I hope this tutorial helped you create HTML button links for your websites. If you have any suggestions or questions feel free to share in the comments.

Related

Written by Noor Alam · Categorized: blog

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Search Noor’s Plugin

Recent Posts

  • How to Add a Quantity Field to a Stripe Payment Button
  • How to Add a Price Field to a PayPal Button
  • Hide Product Image for WooCommerce Plugin
  • How to Show a Download Button to Logged in Users Only
  • How to Add a Price Field to a Stripe Payment Button
  • How to Disable/Hide Featured Images in WordPress Astra Theme
  • What is the White Screen of Death in WordPress?
  • How to Fix YouTube Error The uploader has not made this video available in your country
  • How to Configure SendGrid SMTP in WordPress
  • Checkout for PayPal WordPress Plugin

Copyright © 2022 · Noor's Plugin

This website uses cookies to improve your experience. By continuing, you agree to their use.Got it! Learn More
Privacy & Cookies Policy

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these cookies, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may have an effect on your browsing experience.
Necessary
Always Enabled
Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.
Non-necessary
Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.
SAVE & ACCEPT