Style a tag as button css
Much belated answer: Show
I've been wrestling with this on and off since I first started working in ASP. Here's the best I've come up with: Concept: I create a custom control that has a tag. Then in the button I put an onclick event that sets document.location to the desired value with JavaScript. I called the control ButtonLink, so that I could easily get if confused with LinkButton. aspx:
code behind:
Advantages of this
scheme: It looks like a control. You write a single tag for it, The resulting button is a "real" HTML button and so looks just like a real button. You don't have to try to simulate the look of a button with CSS and then struggle with different looks on different browsers. While the abilities are limited, you can easily extend it by adding more properties. It's likely that most properties would just have to "pass thru" to the underlying button, like I did for text, enabled and cssclass. If anybody's got a simpler, cleaner or otherwise better solution, I'd be happy to hear it. This is a pain, but it works. In this article, we are going to explore three different ways you can make an HTML button act like a link. These are the methods we'll go over:
But first, let's take a look at the wrong approach. Why doesn't this approach with the a element work?The code snippet below leads to the freeCodeCamp website when it is clicked.
However, this is not valid HTML. The This is considered bad practice because it makes it unclear as to the user's intent. Links are supposed to navigate the user to another part of the webpage or an external site. And buttons are supposed to perform a specific action like submitting a form. When you nest one inside the other, it makes it confusing as to what action you want performed. That is why it is best to not nest a button inside an anchor tag. How to style a link to look like a button with CSSThis first approach does not use the button at all. We can style an anchor tag to look like a button using CSS. This is the default HTML styling for an anchor tag. We can add a class to the anchor tag and then use that class selector to style the element.
If you wanted the link to open up a new page, you can add the
Then, we can add a background color and change the font color like this:
The next step would be to add some padding around the text:
Lastly, we can use the text-decoration property to remove the underline from the text:
Now we have an anchor tag that looks like a button. We can also make this "button" be a little more interactive by changing the background color depending on the state of the link.
We could get more intricate with the design, but this is just to show you the basics of styling a link like a button. You could also choose to use a CSS library like Bootstrap.
If your project already includes Bootstrap, then you can use the built-in button styles. But I would not import Bootstrap just to style one link. What are the issues with this approach?There is some debate whether it is good practice to style links as buttons. Some will argue that links should always look like links and buttons should look like buttons. In the web book titled Resilient Web Design, Jeremy Keith states that one material should not be used as a substitute for another, otherwise the end result is deceptive. Why did I bother to bring up this debate? My goal is not to make you choose one side of the debate over another. I just want you to be aware of this ongoing discussion. How to use the action and formaction attributes to make a button in a formHow to use the action attributeAnother alternative would be to nest the button inside a form and use the action attribute. Input example:
Button example:
This would be the default button style. We could use the same styles as earlier, but we would have to add the cursor pointer and set the border to none, like this:
How to use the formaction attributeSimilar to the previous approach, we can create a form and use the formaction attribute. Input example:
Button example:
You can only use the formaction attribute with inputs and buttons that have Is this semantically correct?While this appears to be a working solution, there is a question if this is semantically correct. We are using the form tags but this does not function like a real form. The purpose of a form is to collect and submit user data. But we are using the submit button to navigate the user to another page. When it comes to semantics, this is a not a good way to use the form tags. Side effects for using the action and formaction attributesWhen you click on the button, something interesting happens with the URL. The URL now has a question mark at the end of it. The reason for this change is because the form is using the GET method. You could switch to the POST method, but there might be cases where that is not ideal either.
While this approach is valid HTML, it does come with this unintended side effect. How to use the JavaScript onclick event to make a buttonIn the previous approaches, we have looked at HTML and CSS solutions. But we can also use JavaScript to achieve the same result. Input example:
Button example:
The Drawbacks to this approachWhile this solution does work, there are some potential issues to consider. If the user has decided to disable JavaScript in their browser, then clearly this solution would not work. Unfortunately, that could lead to a poor user experience. ConclusionThe goal of this article was to show you three different ways you can make buttons act like links. The first approach was to design a link to look like a button. We also looked into the debate whether it is a good idea to change the appearance of links to look like another element. The second approach used the form and formaction attributes. But we also learned that this approach has some side effects with the URL and is not semantically correct. The third approach used the JavaScript onclick event and the Window.location.href. But we also learned that this approach might not work if the user decides to disable JavaScript in their browser. As a developer, it is really important to look at the pros and cons of a particular approach before incorporating it into your project. I hope you enjoyed this article and learned a few things along the way. Happy coding! Learn to code for free. freeCodeCamp's open source curriculum has helped more than 40,000 people get jobs as developers. Get started How do you style an A tag to look like a button?How to style a link to look like a button with CSS. We can add a class to the anchor tag and then use that class selector to style the element. ... . The next step would be to add some padding around the text: .fcc-btn { background-color: #199319; color: white; padding: 15px 25px; }. How do I style a specific button in CSS?The class="button" attribute will be used to style the button in a separate CSS file. The value button could be any other name you choose. For example you could have used class="btn" . The text Click me! is the visible text inside the button.
How do you make a tag button?The . You can put content like text or image within the tag. You should always specify the type attribute for a
Can I use a tag as button?: according with W3, this is the standard tag to create buttons on the page, so use it when you need an action like onClick(). tag: is equal to the button tag, but you need it for form submission, because browser that submit for with
|