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?
TLDR; you can open an anchor link in a new Tab/Window but not a button. Here is a rule of thumb: For navigation just use anchor it's alright to style it as a button and let it use it's href attribute well. For quick actions (play,pause,stop,+1 like) just use button it doesn't have href for a reason!
The plain HTML way is to put it in a <form> wherein you specify the desired target URL in the action attribute. If necessary, set CSS display: inline; on the form to keep it in the flow with the surrounding text. Instead of <input type="submit"> in above example, you can also use <button type="submit"> .
In Resilient Web Design Jeremy Keith discusses the idea of material honesty. He says that “one material should not be used as a substitute for another, otherwise the end result is deceptive”. Making a link look like a button is materially dishonest. It tells users that links and buttons are the same when they're not.
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 class="button">Add Problem</a>
http://jsfiddle.net/GCwQu/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With