In this tutorial we will learn how to add an HTML button to a static web page and how to link it. This article is intended for beginners looking to learn front-end web development.
Basic HTML and CSS skills
Basic knowledge of web browsers
Basic knowledge of text editors
To get started let’s assume you've written the HTML and CSS code to your liking and you’re ready to make your page a little dynamic by adding buttons that link to other web pages. Before we get into the buttons, let’s first ensure that you already have your page set-up in the standard HTML format and you have your basic HTML tags; <html>, <head>, <body> and any other elements like <h1>, <p>, <h2>, etc. The syntax and proper use of these elements is crucial for your button to work.
Where Should the Button Go?
You’ve built your HTML using the proper syntax, but where do you want to add your button? It depends on the type of static web page your building. Popular static sites are blogs, portfolios, and sites for documentations or manuals, there are many reasons to start with static sites. But, basic page layout usually calls for the placement of buttons to be in the middle of the page or closer to the bottom. That being said there are different types of buttons to consider too.
Different Types of Buttons- Really?
According to HTML.com, there are three types of buttons:
submit – Submits the current form data. (This is default)
reset – resets data in the current form.
In this case we will be using a standard Button and focusing on HTML and CSS. Thanks to our trusty friends at Stack Overflow we are able to find information pretty easily on how to create an HTML button that acts like a link, in their example, this is the HTML code needed to add your button and the code needed to style it in CSS.
However if you're new to coding then this information might not be that easy to understand. Here are a few tips to ensure you add this code the right way.
Place the <a href code in your HTML file within the <main> section and always in the <body> it’s not standard to add buttons to the top navigation or the footer.
Replace the "http://google.com" section with your website link.
The “Go to Google” is what everyone will see – you can rename it.
For the CSS class (a.button) – suggest adding; min-width: 25%, height: 25% and font-size: .4em; so your button is standard size and font size.
Finally, don’t forget to save your changes in your text editor and test everything periodically before you deploy. For more information on linking using HTML check out w3schools.com.
Lea Whitney is a writer turned aspiring front-end web developer. She holds two degree’s in Journalism; B.A. and M.A. and her interest in web development began during her eight-year-career in the financial sector where she worked as an internal website content manager.
She has also worked at various non-profits for the developmentally disabled and plans to combine her interest in web development and passion for helping the developmentally disabled into a career in design and web accessibility.
Lea is currently a student in the Moms Can & Co. Moms Can Code School online program where she is building her skills in web development as a means to take that next step to becoming a front-end web developer!