How do I make an html link look like a button?
CssCss Problem Overview
I'm using ASP.NET, some of my buttons just do redirects. I'd rather they were ordinary links, but I don't want my users to notice much difference in the appearance. I considered images wrapped by anchors, i.e. tags, but I don't want to have to fire up an image editor every time I change the text on a button.
Css Solutions
Solution 1 - Css
Apply this class to it
.button {
font: bold 11px Arial;
text-decoration: none;
background-color: #EEEEEE;
color: #333333;
padding: 2px 6px 2px 6px;
border-top: 1px solid #CCCCCC;
border-right: 1px solid #333333;
border-bottom: 1px solid #333333;
border-left: 1px solid #CCCCCC;
}
<a href="#" class="button">Example</a>
Solution 2 - Css
Why not just wrap an anchor tag around a button element.
<a href="somepage.html"><button type="button">Text of Some Page</button></a>
This will work for IE9+, Chrome, Safari, Firefox, and probably Opera.
Solution 3 - Css
IMHO, there is a better and more elegant solution. If your link is this:
<a href="http://www.example.com">Click me!!!</a>
The corresponding button should be this:
<form method="GET" action="http://www.example.com">
<input type="submit" value="Click me!!!">
</form>
This approach is simpler because it uses simple html elements, so it will work in all the browsers without changing anything. Moreover, if you have styles for your buttons, this solution will apply the same styles to your new button for free.
Solution 4 - Css
The CSS3 appearance property provides a simple way to style any element (including an anchor) with a browser's built-in <button> styles:
a.btn {
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
}
<body>
<a class="btn">CSS Button</a>
</body>
CSS Tricks has a nice outline with more details on this. Keep in mind that no version of Internet Explorer currently supports this according to caniuse.com.
Solution 5 - Css
If you want nice button with rounded corners, then use this class:
.link_button {
-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);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
background: #4479BA;
color: #FFF;
padding: 8px 12px;
text-decoration: none;
}
<a href="#" class="link_button">Example</a>
Solution 6 - Css
a {
display: block;
height: 20px;
width: auto;
border: 1px solid #000;
}
You can play with <a> tags like this if you give them a block display. You can adjust the border to give a shade like effect and the background color for that button feel :)
Solution 7 - Css
As TStamper said, you can just apply the CSS class to it and design it that way. As CSS improves the number of things that you can do with links has become extraordinary, and there are design groups now that just focus on creating amazing-looking CSS buttons for themes, and so forth.
For example, you can transitions with background-color using the -webkit-transition property and pseduo-classes. Some of these designs can get quite nutty, but it's providing a fantastic alternative to what might in the past have had to have been done with, say, flash.
For example (these are mind-blowing in my opinion), http://tympanus.net/Development/CreativeButtons/ (this is a series of totally out-of-the-box animations for buttons, with source code on the originating page). http://www.commentredirect.com/make-awesome-flat-buttons-css/ (along the same lines, these buttons have nice but minimalistic transition effects, and they make use of the new "flat" design style.)
Solution 8 - Css
You may do it with JavaScript:
- Get CSS styles of real button with
getComputedStyle(realButton). - Apply the styles to all your links.
<body>
<h3>Button Styled Links</h3>
<button class="used-for-btn-css-class" style="display: none"></button>
<a href="//github.io" class="btn">first</a>
<a href="//github.io" class="btn">second</a>
<button>real button</button>
<script>/* You may put JS here. */</script>
</body>
/* javascript, after body is loaded */
'use strict';
{ // Namespace starts (to avoid polluting root namespace).
const btnCssText = window.getComputedStyle(
document.querySelector('.used-for-btn-css-class')
).cssText;
document.querySelectorAll('.btn').forEach(
(btn) => {
const _d = btn.style.display; // Hidden buttons should stay hidden.
btn.style.cssText = btnCssText;
btn.style.display = _d;
}
);
} // Namespace ends.
Solution 9 - Css
You could create a standard button, then use it as the background image for a link. Then you can set the text in the link without changing the image.
The best solutions if you don't a special rendered button are the two already given by TStamper and Ólafur Waage.
Solution 10 - Css
This gets into the details of the css a bit more too, and gives you some images:
http://www.dynamicdrive.com/style/csslibrary/item/css_square_buttons/
Solution 11 - Css
>How about using asp:LinkButton?
You can do that - I made a linkbutton look like a standard button, using TStamper's entry. Underlining showed under the text when I hovered, though, in spite of the text-decoration: none setting.
I was able to stop the hover-underlining by adding style="text-decoration: none" within the linkbutton:
<asp:LinkButton
id="btnUpdate"
CssClass="btnStyleTStamper"
style="text-decoration: none"
Text="Update Items"
Onclick="UpdateGrid"
runat="server"
/>
Solution 12 - Css
Much belated answer:
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
Solution 13 - Css
This is what I used. Link button is
<div class="link-button"><a href="/">Example</a></div>
CSS
/* body is sans-serif */
.link-button {
margin-top:15px;
max-width:90px;
background-color:#eee;
border-color:#888888;
color:#333;
display:inline-block;
vertical-align:middle;
text-align:center;
text-decoration:none;
align-items:flex-start;
cursor:default;
-webkit-appearence: push-button;
border-style: solid;
border-width: 1px;
border-radius: 5px;
font-size: 1em;
font-family: inherit;
border-color: #000;
padding-left: 5px;
padding-right: 5px;
width: 100%;
min-height: 30px;
}
.link-button a {
margin-top:4px;
display:inline-block;
text-decoration:none;
color:#333;
}
.link-button:hover {
background-color:#888;
}
.link-button:active {
background-color:#333;
}
.link-button:hover a, .link-button:active a {
color:#fff;
}
Solution 14 - Css
Use this class. It will make your link look the same as a button when applied using the button class on an a tag.
or
.button {
display: inline-block;
outline: none;
cursor: pointer;
border: solid 1px #da7c0c;
background: #478dad;
text-align: center;
text-decoration: none;
font: 14px/100% Arial, Helvetica, sans-serif;
padding: .5em 2em .55em;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .3em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.button:hover {
background: #f47c20;
background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
background: -moz-linear-gradient(top, #f88e11, #f06015);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
}
.button:active {
position: relative;
top: 1px;
}
Solution 15 - Css
By using border, color and background color properties you can create a button lookalike html link!
a {
background-color: white;
color: black;
padding: 5px;
text-decoration: none;
border: 1px solid black;
}
a:hover {
background-color: black;
color: white;
}
<a href="https://stackoverflow.com/
">Open StackOverflow
Hope this helps :]
Solution 16 - Css
HTML
<a class="btn">Button</a>
CSS
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
Solution 17 - Css
I use an asp:Button:
<asp:Button runat="server"
OnClientClick="return location='targetPage', true;"
UseSubmitBehavior="False"
Text="Button Text Here"
/>
This way, the operation of the button is completely client-side and the button acts just like a link to the targetPage.
Solution 18 - Css
.button {
font: bold 11px Arial;
text-decoration: none;
background-color: #EEEEEE;
color: #333333;
padding: 2px 6px 2px 6px;
border-top: 1px solid #CCCCCC;
border-right: 1px solid #333333;
border-bottom: 1px solid #333333;
border-left: 1px solid #CCCCCC;
}
<a href="#" class="button">Example</a>
Solution 19 - Css
Use below snippet.
.a{
color: $brn-acc-clr;
background-color: transparent;
border-color: #888888;
&:hover:active{
outline: none;
color: #888888;
border-color: #888888;
}
&:fill{
background-color: #888888;
color: #fff;
box-shadow: 0 3px 10px rgba(#888888, 0.5);
&:hover:active{
color: #fff;
}
&:hover:not(:disabled){
transform: translateY(-2px);
background-color: darken(#888888, 4);
}
}
}
Solution 20 - Css
Simple button css now you can play around with your editor
a {
display: inline-block;
background: #000000c9;
color: #000;
padding: 12px 24px;
text-align: center;
text-decoration: none;
font-size: 16px;
cursor: pointer;
}
a:hover {
background:#000
cursor: pointer;
transition: 0.3s ease-in;
}
Link tag
<a href="#">Hover me<a>
Solution 21 - Css
If you need some cool effect, hover and shadow; you can use this:
.button {
text-decoration: none;
padding: 15px 25px;
font-size: 24px;
cursor: pointer;
text-align: center;
text-decoration: none;
outline: none;
color: #fff;
background-color: #450775;
border: none;
border-radius: 15px;
box-shadow: 0 9px #e1d5ed;
}
.button:hover {background-color: #220440}
.button:active {
background-color: #230545;
box-shadow: 0 5px #e1d5ed;
transform: translateY(4px);
}
Solution 22 - Css
This worked for me. It looks like a button and behaves like a link. You can bookmark it for example.
<a href="mypage.aspx?param1=1" style="text-decoration:none;">
<asp:Button PostBackUrl="mypage.aspx?param1=1" Text="my button-like link" runat="server" />
</a>
Solution 23 - Css
How about using asp:LinkButton?