I have this button image:
I was wondering whether it would be possible to make a simple
<a href="">some words</a> and style that link to appear as that button?
If it is possible, how do I do that?
618 Answers
Using CSS:
.button { display: block; width: 115px; height: 25px; background: #4E9CAF; padding: 10px; text-align: center; border-radius: 5px; color: white; font-weight: bold; line-height: 25px;
}<a>Add Problem</a>Check Bootstrap's docs. A class .btn exists and works with the a tag, but you need to add a specific .btn-* class with the .btn class.
eg: <a></a>
you can easily wrap a button with a link like so <a href="#"> <button>my button </button> </a>
Something like this would resemble a button:
a.LinkButton { border-style: solid; border-width : 1px 1px 1px 1px; text-decoration : none; padding : 4px; border-color : #000000
}See for an example.
1Try this:
<link rel="stylesheet" href=""> <script src=""></script> <script src=""></script> <div> <h2>Button Tags</h2> <a href="#">Link Button</a> <button type="button">Button</button> <input type="button" value="Input Button"> <input type="submit" value="Submit Button"> </div>You can use the a
hreftag line from there.<a href="URL">Button Text</a>
If you'd like to avoid hard-coding a specific design with css, but rather rely on the browser's default button, you can use the following css.
a.button { -webkit-appearance: button; -moz-appearance: button; appearance: button;
}Notice that it probably won't work on IE.
2None of other answers shows the code where the link button changes its appearance on hover.
This is what I've done to fix that:
HTML:
<a href="">My button</a>CSS:
.link_button2 { -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; border: solid 1px #1A4575; 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: #3A68A1; color: #fee1cc; text-decoration: none; padding: 8px 12px; text-decoration: none; font-size: larger;
}
a.link_button2:hover { text-decoration: underline; background: #4479BA; border: solid 1px #20538D; /* optional different shadow on hover text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.7); -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 1px 1px rgba(0, 0, 0, 0.4); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 1px 1px rgba(0, 0, 0, 0.4); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 1px 1px rgba(0, 0, 0, 0.4); */
}JSFiddle:
You have got two options for consistency.
- Use framework-specific tags, and use them throughout the website.
- Use JavaScript to emulate a link on a button element, and then have the button consistent with browser's buttons look. Those css button-look hacks will never be accurate.
.
<button onclick="location.href = 'Homepage.html'; return false;">My Button</button>return false; is to prevent the default behavior of the button being clicked.
- Use the
background-imageCSS property on the<a>tag - Set
display:blockand adjustwidthandheightin CSS
This should do the trick.
Yes you can do that.
Here is an example:
a{ background:IMAGE-URL; display:block; height:IMAGE-HEIGHT; width:IMAGE-WIDTH;
}Of course you can modify the above example to your need. The important thing is to make it appear as a block (display:block) or an inline block (display:inline-block).
For basic HTML, you can just add an img tag with the src set to your image URL inside the HREF (A)
<a href=""><img src="" /></a>You can create a class for the anchor elements that you would like to display as buttons.
Eg:
Using an image :
.button { display:block; background: url('image'); width: same as image height: same as image
}or using a pure CSS approach:
.button { background:#E3E3E3; border: 1px solid #BBBBBB; border-radius: 3px 3px 3px 3px;
}Always remember to hide the text with something like:
text-indent: -9999em;An excellent gallery of pure CSS buttons is hereand you can even use the css3 button generator
Plenty of styles and choices are here
good luck
Just take regular css button designs, and apply that CSS to a link (in exactly the same way as you would to a button).
Example:
<a href="#">Some words</a>
<style type="text/css">
.stylish-button { -webkit-box-shadow:rgba(0,0,0,0.2) 0 1px 0 0; -moz-box-shadow:rgba(0,0,0,0.2) 0 1px 0 0; box-shadow:rgba(0,0,0,0.2) 0 1px 0 0; color:#333; background-color:#FA2; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; border:none; font-size:16px; font-weight:700; padding:4px 16px; text-shadow:#FE6 0 1px 0
}
</style>Like so many others, but with explanation in the css.
/* select all <a> elements with class "button" */
a.button { /* use inline-block because it respects padding */ display: inline-block; /* padding creates clickable area around text (top/bottom, left/right) */ padding: 1em 3em; /* round corners */ border-radius: 5px; /* remove underline */ text-decoration: none; /* set colors */ color: white; background-color: #4E9CAF;
}<a href="#">Add a problem</a>for those having problems after adding active and focus give a class or id name to your button and add this to css
for example
//html code
<button>ABOUT US</button>//css code
#aboutus{background-color: white;border:none;outline-style: none;}Tested with Chromium 40 and Firefox 36
<a href="url"> <input type="button" value="click me!"/>
</a>Try this code:
<code> <a href="#" > HOME </a> <style type="text/css"> .button { background-color: #00CCFF; padding: 8px 16px; display: inline-block; text-decoration: none; color: #FFFFFF border-radius: 3px;} .button:hover { background-color: #0066FF; } </style>
</code>Watch this (It will explain how to do it) -
1A simple as that :
<a href="#">link</a>Just add "class="btn btn-success" & role=button
1
