Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to make an HTML anchor tag (or link) look like a button?

Tags:

html

css

I have this button image:
enter image description here

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?

like image 984
GeekedOut Avatar asked Dec 02 '11 13:12

GeekedOut


People also ask

Can I use anchor as button?

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!

How do I create a link button in HTML?

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"> .

Can links look like buttons?

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.


1 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 class="button">Add Problem</a>

http://jsfiddle.net/GCwQu/

like image 156
Declan Cook Avatar answered Oct 09 '22 06:10

Declan Cook