- How to change the href value of a tag after click on button using JavaScript ?
- How to Add an HTML Button that Acts Like a Link
- Add an inline onclick event
- Example of adding an onclick event to the tag:
- Example of adding an onclick event to the tag:
- Use the action or formaction attribute.
- Example of creating a button acting like a link with the action attribute:
- Example of opening a link from a button in a new window:
- Example of creating a button acting like a link with the formaction attribute:
- Style the link as a button
- Example of styling a link as a button with CSS:
- Example of styling a link as a button and adding a hover effect:
- How about the accessibility?
- Linking pages using buttons click event
- Another way of linking button
- Demo of two types of buttons with code
- Using hyper link
- Opening in a new window
- Managing from a child window
- Button with Style
- Using bootstrap style
- Using image to link
- target=new
How to change the href value of a tag after click on button using JavaScript ?
JavaScript is a high-level, interpreted, dynamically typed, and client-side scripting language. HTML is used to create static web pages. JavaScript enables interactive web pages when used along with HTML and CSS. Document Object Manipulation (DOM) is a programming interface for HTML and XML documents. DOM acts as an interface between JavaScript and HTML combined with CSS. The DOM represents the document as nodes and objects i.e. the browser turns every HTML tag into a JavaScript object that we can manipulate. DOM is an object-oriented representation of the web page, that can be modified with a scripting language such as JavaScript. To manipulate objects inside the document we need to select them and then manipulate them. Selecting an element can be done in five ways:
- document.querySelector() Method: It returns the first element that matches the query.
- document.querySelectorAll() Method: It returns all the elements that match the query.
- document.getElementById() Method: It returns the one element that matches the id.
- document.getElementsByClassName() Method: It returns all the elements that match the class.
- document.getElementsByTagName() Method: It returns a list of the elements that match the tag name.
DOM allows attribute manipulation. Attributes control the HTML tag’s behavior or provide additional information about the tag. JavaScript provides several methods for manipulating an HTML element attribute. The following methods are used to manipulate the attributes:
- getAttribute() method: It returns the current value of an attribute on the element and returns null if the specified attribute does not exist on the element.
- setAttribute() method: It updates the value of an already existing attribute on the specified element else a new attribute is added with the specified name and value.
- removeAttribute() method: It is used to remove an attribute of the specified element.
How to Add an HTML Button that Acts Like a Link
There are several ways of creating an HTML button, that acts like a link (i.e., clicking on it the user is redirected to the specified URL). You can choose one of the following methods to add a link to the HTML button.
Add an inline onclick event
You can add an inline onclick event to the tag.
Example of adding an onclick event to the tag:
html> html> head> title>Title of the document title> head> body> button onclick="window.location.href='https://w3docs.com';"> Click Here button> body> html>
It is also possible to add an inline onclick event to the tag within the element.
Example of adding an onclick event to the tag:
html> html> head> title>Title of the document title> head> body> form> input type="button" onclick="window.location.href='https://www.w3docs.com';" value="w3docs" /> form> body> html>
Use the action or formaction attribute.
Another way of creating a button that acts like a link is using the action or formaction attribute within the element.
Example of creating a button acting like a link with the action attribute:
html> html> head> title>Title of the document title> head> body> form action="https://www.w3docs.com/"> button type="submit">Click me button> form> body> html>
To open the link in a new tab, add target=»_blank» .
Example of opening a link from a button in a new window:
html> html> head> title>Title of the document title> head> body> form action="https://www.w3docs.com/" method="get" target="_blank"> button type="submit">Click me button> form> body> html>
Since there is no form and no data is submitted, this may be semantically incorrect. However, this markup is valid.
Example of creating a button acting like a link with the formaction attribute:
html> html> head> title>Title of the document title> head> body> form> button type="submit" formaction="https://www.w3docs.com">Click me button> form> body> html>
The formaction attribute is only used with buttons having type=»submit» . Since this attribute is HTML5-specific, its support in old browsers may be poor.
Style the link as a button
Add a link styled as a button with CSS properties. A href attribute is the required attribute of the tag. It specifies a link on the web page or a place on the same page where the user navigates after clicking on the link.
Example of styling a link as a button with CSS:
html> html> head> title>Title of the document title> style> .button < background-color: #1c87c9; border: none; color: white; padding: 20px 34px; text-align: center; text-decoration: none; display: inline-block; font-size: 20px; margin: 4px 2px; cursor: pointer; > style> head> body> a href="https://www.w3docs.com/" class="button">Click Here a> body> html>
Let’s see one more example.
Example of styling a link as a button and adding a hover effect:
html> html> head> title>Title of the document title> style> .button < display: inline-block; padding: 10px 20px; text-align: center; text-decoration: none; color: #ffffff; background-color: #7aa8b7; border-radius: 6px; outline: none; transition: 0.3s; > .button:hover < background-color: #c2c7c7; > style> head> body> a class="button" href="https://www.w3docs.com/learn-html/html-button-tag.html">HTML button tag a> body> html>
How about the accessibility?
Let’s take accessibility into our account for the last example. Here are some improvements to make the code more accessible:
If the button contained an image, it would be important to provide an alt attribute to make the image accessible to screen readers. Since this button doesn’t have an image, we don’t need to worry about this.
Adding a label to the button will help users who rely on assistive technology understand the purpose of the button. We can do this by wrapping the button text in a element and adding an aria-label attribute to the button.
To improve visibility for users with low vision, we can increase the contrast between the text color and background color of the button. We can achieve this by making the background color darker or the text color lighter.
Adding a focus style to the button will help users who navigate using the keyboard to see which element is currently focused. We can add a simple border to the button to achieve this.
Here’s the updated code with these improvements:
html> html> head> title>Title of the document title> style> .button < display: inline-block; padding: 10px 20px; text-align: center; text-decoration: none; color: #ffffff; background-color: #3c5d6e; border-radius: 6px; outline: none; transition: 0.3s; border: 2px solid transparent; > .button:hover, .button:focus < background-color: #c2c7c7; border-color: #7aa8b7; > style> head> body> a class="button" href="https://www.w3docs.com/learn-html/html-button-tag.html" aria-label="Learn about the HTML button tag">span>HTML button tag span> a> body> html>
Linking pages using buttons click event
Hyper links are used to link different pages within a site and outside a site to each other. Same thing can be achieved by using a button. We can use a button to link different pages. We will connect the url of the new page to the onclick event of the button. We can do this by using a form and a submit button but there is no point in using a form for a hyper linking of pages. So here are some examples of using buttons to link different pages.
HTML button with onClick event with location to link between web pages using address or URLs
Another way of linking button
Demo of two types of buttons with code
Using hyper link
Some time from SEO angle linking using a button is not a good idea as we loose the anchored text advantage of hyper linking. Read the article on search engine friendly page design to know more on this.
Opening in a new window
Managing from a child window
We can open a child window of different height and width by using JavaScript window.open command. We can pass any variable to child window and receive data from child window to main window.
We can display buttons in Child window and manage the main ( parent ) window by using buttons. We can make the main window navigate to different page from the child window.
Check this demo on using buttons to manage main window.
To display above button , source is here
Button with Style
We can create attractive buttons by using style property. We can manage shape, size, font , background colour, shadow, hover and many other properties of the button.
DEMO of Buttons with CSS properties →
Using bootstrap style
Bootstrap is opensource front end framework to manage look and feel of your website.
We can add attractive buttons using bootstrap classes.
Primary secondary success info warning danger link
Using image to link
Click this logo ( image ) to visit home page
target=new
We can open the page in a new tab by using target=new . This can be used in text links and buttons also.
plus2net.com
Click for more tutorial on Button Links & CSS