How to create an HTML button that acts as a link? When to use the Button element
There are two approaches to creating a button on a website in the form of a link. Let's look at each of them in detail.
1. Button in the form of an imageThis is the simplest approach to creating a button as a link on a website. To do this, you just need to find a suitable picture for the button. For example, the picture with your button is called button.jpg. Then, to create the link, the code should be as follows:
...This is what it turns into on the site page:
This is the most basic option. I advise you to read about the tag and tag to customize the button exactly to your requirements.
By the way, there is a special website for creating images for buttons: http://dabuttonfactory.com/. Here you can create a button for free according to your taste (set a style, select an image, write suitable text, etc.).
2. Button with using HTML tagThis option is also one of the methods to create a button as a link. I'll bring you elementary example button created using the and tag:
... ...This is what it will roughly look like on the page:
Instead of URL1 and URL2, you need to write the addresses of the pages where you need to go. If you want links to open in new tabs (analogous to the target="_blank" attribute of the a tag), then instead of onclick="javascript:window.location="..."" you need to write onclick="javascript:window.open ="..."" (replace location with open).
I’m almost sure that you will want to design the button somehow differently (to match the design of your site). To do this, introduce the btn class:
.btn ( //Task general style for button height :30px ;border-color :#c2e254 #9bb838 #9bb838 #c2e254 ;
border-style :solid ; border-width :1px ; in web design, gradients, shadows and roundings have led to the blurring of the clear line between built-in interface elements and “drawn” ones. In fact, the user should not care what is in front of him, a link or a button, even if they look exactly the same, because both can be clicked. In reality, incorrect use Changing one element instead of another can lead to a violation of the understanding of the site’s logic. In other words, it will become inconvenient and uncomfortable for the site visitor to use it.
Let's make a link and a button, design them the same way and see how they differ from each other besides the design. In example 1, I inserted the tag into the code and applied the design style class to them, while trying to remove the differences so that these two elements looked similar to each other, like twins.
Example 1. Design of elements
HTML5 CSS3 IE Cr Op Sa Fx
Link and button .design ( display: inline-block; /* Inline block element */ padding: 5px 20px; /* Add fields */ text-decoration: none; /* Remove the underline from the link */ cursor: pointer; / * Hand cursor */ background: #deefff; /* Background for browsers that don't support gradients */ /* Gradient */ background: -moz-linear-gradient(top, #deefff 0%, #98bede 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#deefff), color-stop(100%,#98bede)); deefff 0%,#98bede 100%); background: -o-linear-gradient(top, #deefff 0%,#98bede 100%); background: -ms-linear-gradient(top, #deefff 0%,#98bede 100%); background: linear-gradient(top, #deefff 0%,#98bede 100%); border-radius: 10px; /* Round the corners */ border: 1px solid #008; /* Add a blue border */ font : 12px/1 Arial, sans-serif; /* Chained font */ color: #2c539e; /* Text and link color */ )
Here's what it looks like in the Chrome browser (Figure 1).
At first glance there is no difference. Both elements are the same; when you hover your mouse over them, it turns into a “hand”. You can click and wait for the answer tone. This is where the little things begin where the devil lies. I systematize differences in small things.
- in the status line the browser shows the address of the link to which it leads;
- the link can be opened in a new window or tab with the middle mouse button;
- the link can be saved through the browser context menu.
- When the button is clicked, it goes to the page specified inside the action attribute of the tag. Of course, this works if we have a button embedded in a form. In the example above, you can even click the button, but it will not lead to anything;
- You can attach a JavaScript function to the button, which will do something magical that a link cannot.
It turns out that the result of clicking a button is unpredictable, unlike a link. Here we know for sure that a new page will open. In the case of a button, a new page may open, a script may be executed, or nothing will happen at all. In addition, there is confusion between the button and the link. Our super-stylish button doesn't look much like itself, and to show that it can be clicked, we add a cursor property to the styles with the value pointer. But this leads to the fact that the button is now perceived as a link and some users try to open such a button in a new tab, and this, of course, is impossible.
What can be done to eliminate this contradiction. There are several options.
The dotted text is shown in Fig. 2. For clarity, I slightly increased the font size.
Rice. 2. Button with dotted underline text
Again, if clicking the button opens another page, the dotted line is not needed as it will confuse users. So method 2 is only suitable for scripts that do some work within the same page.
I would like to create an HTML button that acts as a link. This way, when you click the button, it will redirect to the page. I'd like it to be as accessible as possible.
I also like it if the URL doesn't have any extra characters or parameters.
How can I achieve this?
Continue
but the problem is that in Safari and Internet Explorer, it adds a question mark at the end of the URL. I need to find a solution that doesn't add any characters to the end of the URL.
There are two other solutions for this: using JavaScript or styling a link to look like a button.
Using JavaScript:
Continue
But this obviously requires JavaScript, and for this reason it is less accessible to screen readers. Link point - go to another page. So trying to make a button act like a link is wrong decision. My suggestion is that you should use a link and style it so it looks like a button.
Continue
27 answers
HTMLSimple HTML way is to put it in where you specify the desired target URL in the action attribute.
If necessary, install CSS display: inline; in the form to keep it in flow with the surrounding text. Instead of in the above example you can also use . The only difference is that the item allows children.
You would intuitively expect to be able to use , similar to the element but unfortunately no, this attribute does not exist according to the HTML Specification.
CSSIf CSS is allowed, just use , which you want to appear like a button, using, among other things, the appearance property (Internet-only browser support is currently (July 2015) still poor).
Go to Google a.button ( -webkit-appearance: button; -moz-appearance: button; appearance: button; text-decoration: none; color: initial; )
Or choose one of these many CSS libraries, such as Bootstrap.
JavaScriptIf JavaScript is enabled, set window.location.href .
If this appearance the button you are looking for in base tag HTML bindings, you can use Twitter Bootstrap to format any of the following common links/buttons HTML type so that they appear as a button. Please note the visual differences between versions 2, 3 or 4 of the frame:
Link Button
Usage:
Click me
Unfortunately, this markup is no longer valid in HTML5 and will not validate or always perform as potentially expected. Take a different approach.
As with HTML5, buttons support the formaction attribute. Best of all, no Javascript or cheating required.
Go to Stack Overflow!
Warning
It's really very simple and without using any form elements. You can just use the tag using the button inside :).
And it will load the href on the same page. Want to new page? Just use target="_blank" .
If you are using an internal form, add the type="reset" attribute along with the button element. This will prevent the form from taking effect.
www.example.com
The only way to do this (except for BalusC's ingenious idea!) is to add to the button JavaScript onclick event, which is not suitable for accessibility.
Are there any disadvantages in performing next steps?
Where a.nostyle is a class that has a style for your link (where you can get rid of the standard link styling), and span.button is a class that has a style for your "button" (background, border, gradient, etc. ).
Going along with what some others have added, you can go crazy with just a simple CSS class, no PHP, no jQuery, just HTML and CSS.
Create a CSS class and add it to your anchor. The code is below.
Button-link ( height:60px; padding: 10px 15px; background: #4479BA; color: #FFF; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; border: solid 1px #20538D; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4); -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba( 0, 0, 0, 0.2); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2); 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2); .button-link:hover ( background: #356094; border: solid 1px #2A4E77; text- decoration: none ) Press Here to Go
That's all. It's very easy to do and allows you to be as creative as you'd like. You control colors, size, shapes (radius), etc. For getting additional information see the site where I found this.
There seem to be three solutions to this problem (all with pros and cons).
Solution 1: Button on the form.Continue But the problem is that in some versions popular browsers such as Chrome, Safari and Internet Explorer
, it adds a question mark to the end of the URL. So in other words, for the code above, your URL would look like this:
Http://someserver/pages2?
There is one way to fix this, but it will require some server side configuration. One example of using Apache Mod_rewrite would be to redirect all requests with a trailing ? to their corresponding URL without ? . Here is an example using .htaccess, but there is a full flow:
RewriteCond %(THE_REQUEST) \?\ HTTP RewriteRule ^/?(index\.cfm)? /?
- Similar configurations may vary depending on the web server used and the stack used. So, a summary of this approach:
- It's a real button, and semantically it makes sense.
- Trailing? looks ugly in some browsers. This can be fixed with a hack (in some cases) with using POST instead of GET, but in a clean way is a server side redirect. The downside to a server side redirect is that it will cause an extra HTTP call for those links due to the 304 redirect.
- Adds an additional element
- Positioning elements when using multiple shapes can be tricky and gets worse when working with responsive designs. Some arrangement may become impossible to achieve this solution depending on the order of the elements. This can ultimately impact usability if the project is affected by this issue.
You can use JavaScript to fire onclick and other events to simulate the behavior of a button link. The example below could be improved and removed from the HTML, but here's just to illustrate the idea:
Continue
- Simple (for basic requirements) and preserving semantics without requiring additional form.
- Since it's a real button, it will also act like a real button (e.g. draggable behavior and/or simulate a click when pressing the spacebar when an action is active).
- Requires JavaScript, which means less accessible. This is not ideal for a basic (main) element such as a link.
If you want to avoid using a form or input and you are looking for a link to a button, you can create beautiful buttons using a div wrapper, an anchor, and an h1 tag. You might want this so you can freely post the link on your page. This is especially useful for horizontally centered buttons and those with vertically centered text inside them. Here's how:
Button!
Then in CSS your styling should look like this:
Link-button-wrapper ( width: 200px; height: 40px; box-shadow: inset 0px 1px 0px 0px #ffffff; border-radius: 4px; background-color: #097BC0; box-shadow: 0px 2px 4px gray; display: block; border:1px solid #094BC0; ) .link-button-wrapper > a ( display: inline-table; cursor: pointer; text-decoration: none; height: 100%; width:100%; ) .link-button -wrapper > a > h1 ( margin: 0 auto; display: table-cell; vertical-align: middle; color: #f7f8f8; font-size: 18px; font-family: cabinregular; text-align: center; )
Link link
Button, button a(position:relative;) button a(top:0;left:0;bottom:0;right:0;)
@Nicolas, after working for me, like you, there was no type="button" , which caused it to start behaving like a submit type. Since I already have one submit.it type, this didn't work for me.... and now you can either add a class to the button or to get the required layout:
If you want to create a button that is used for a URL anywhere, create a button class for the anchor.
A.button ( background-color: #999999; color: #FFFFFF !important; cursor: pointer; display: inline-block; font-weight: bold; padding: 5px 8px; text-align: center; -webkit-border- radius: 5px; border-radius: 5px; .button:hover ( text-decoration: none; )
I know there have been many answers submitted, but none of them seem to have addressed the problem. Here's my approach to the solution:
- Use the method the OP starts with. This works very well, but sometimes it adds? to the URL. The main problem is? .
- Use jQuery/JavaScript to execute the following link when JavaScript is enabled, so? is not appended to the URL. It will fall back to the method without issue for the very small proportion of users who don't have JavaScript.
- JavaScript code uses event delegation so you can attach an event listener before or . In this example I'm using jQuery because it's fast and simple, but it can be done in "vanilla" JavaScript.
- The JavaScript code prevents the default action and then follows the link specified in the action attribute.
// Listen for any clicks on an element in the document with the `link` class $(document).on("click", ".link", function(e) ( // Prevent the default action (e.g. submit the form) e.preventDefault( ); // Get the URL specified in the form var url = e.target.parentElement.action; window.location = url;
Form buttons as links Link
You use it, um... well, when you want to put a button on a page that the user can click, right? Unfortunately, things are a little more complicated. In principle, this is close to the truth, but let's study the issue deeper.
The element itself looks like this:
Do something
The element by itself cannot do this. There was a lot of talk about allowing "href everywhere", but nothing ever came of it.
When you press the button, the actual certain actions, if the appropriate context is used...
A button is a form elementWeb forms may contain buttons to perform (confirm) actions. You might think it looks something like this:
The shell element, by default, behaves exactly as shown above.
Submit
However, forms can also have cancel buttons. You can duplicate the button's action type by changing the default behavior from perform (confirm) the action to cancel:
Reset
Clicking this button will remove all other input fields (and text areas) from parent block.
Buttons can contain contentThe main reason for using an element is that it contains both opening and closing () tags. This means that it can be distinguished from any other code. In practice, the following situation often arises:
Confirm
As long as it persists, this mixed content will be displayed on the screen.
As far as I can tell, there are no particular restrictions on what you can put inside a button, so you can put whatever you want in there, creating some really fancy buttons. It is also possible to use pseudo elements.
Let's leave the topic of styles for now, though different browsers usually have special styles that apply to buttons. If you want, you can keep the styles applied by browsers, or you can remove them completely, and then your default style will override the browsers' styles.
Please note: “if a button does not have a valid href, it is just an element”Remember, I wrote earlier that this topic gives me true pleasure. This is what inspired me to write this article. I imagined how much pleasure I would get looking at various incidents. Such as:
I'm already sick of these buttons.
Most likely, the above code means something like: I'm going to click a button to do something with JavaScript. Anyway, this seems to be better than using the regular one, because you get the ability to change the cursor appearance and all the other styles by default.
Outside I'm useless.
However, it still seems betterEven if it doesn’t do anything while outside the , this element is still, in my opinion, better used for other actions that do not require going to another page. If anything, they are better than bogus links.
Fine. Let's insert some JavaScriptThis is probably The best decision. If JavaScript is required for any actions related to clicks, then for an element, in principle, you can do without running JS.
But we can do the following:
// 1. Create a button var button = document.createElement("button"); button.innerHTML = "Do Something"; // 2. Place it var body = document.getElementsByTagName("body"); body.appendChild(button); // 3. Add processing of the action button.addEventListener ("click", function() ( alert("did something"); ));
You can easily make an "add button" part of your JavaScript workflow.
When is it best to use links?If you have any hypertext transitions to other pages, then it makes more sense to format them with a link so that you can use an anchor. Even if you repurpose its behavior via JavaScript.
This is a progressive improvement at its best. For example:
- A search button will usually cause Ajax search scripts to run - while a link may simply point to a search page;
- The "publish" button launches next step publishing something that the user needs - but the link may simply lead to the page / publish /;
- The button with an image thumbnail opens a separate panel on which the image is displayed in larger size— and the link could simply be the URL to that larger image.
If all else fails, insert a button with JavaScript.
Related IssuesYou might end up with something similar to what I did!
I'm fine
But you yourself are not quite okay yet. MDN discusses this issue in detail:
Please note: Be careful when marking links with button functions. Button actions are typically invoked using the Spacebar, while link actions are invoked via the Enter key.
You will also need to add an action handler key that will respond to the Spacebar being pressed to ensure consistency with the original button.
Well, that's all. And um... do interactive things right.
The translation of the article “When To Use The Button Element” was prepared by the friendly project team.
The button itself cannot be made a link; HTML prohibits combining elements (as well as ) and . Thus, you cannot nest a button in a link, or a link in a button. There are three ways to make sure that when you click a button, it opens a web page.
Using HTMLPlace the button inside the element and for the form we specify the action attribute with the web page address (example 1). Additionally you can add target attribute with the value _blank , then the web page will open in a new browser tab.
Example 1. action attribute
Button Follow link
In this example, clicking the button opens the new.html web page in a new tab.
One form cannot be placed inside another. Before adding a button, make sure you only have one form.
Using CSSSince the button cannot be made a link, then we abandon it altogether and style the link so that it looks like a button. Example 2 shows the btn class when adding it to an element the link changes its design.
Button .btn ( display: inline-block; /* Inline block element */ background: #8C959D; /* Gray background color */ color: #fff; /* White text color */ padding: 1rem 1.5rem; /* Margins around the text */ text-decoration: none; /* Remove the underline */ border-radius: 3px; /* Round the corners */ ) Follow the link
Result this example shown in Fig. 1.
Using JavaScriptYou can use the onclick event to navigate to a specified web page by adding it to the . Inside onclick we write document.location , and as the value the address of the desired web page (example 3). Pay attention to the combination of quotes; the web page address is enclosed in single quotes.
