124

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?

6
  • 5
  • 1
    Using CSS I guess ;) google.com.ua/search?q=style+anchor+tag+like+button
    – antyrat
    Dec 2, 2011 at 13:33
  • 5
    Users should know by the look of the web interface what its behavior is... so the look of button should not be used as link , and the visual appearance of a link should not be used as a button to.
    – Antagonist
    Dec 2, 2011 at 13:37
  • 2
    Usually you need more than one image for a button: Standard, hovered, pressed, active. Otherwise it will not feel natural. Dec 2, 2011 at 13:41
  • 2
    By the way, the Ask Question 'button' on this very page is exactly what you were asking for. Nov 12, 2019 at 13:39

18 Answers 18

130

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/

3
  • This only works for me if I apply it to a tag directly (a {display: block ...}), which is not acceptable. Do you have any idea why class attribute inside a tag won't work? :( I'm using Firefox 27. I also tried a.button {...} and it doesn't work either. Feb 26, 2014 at 0:51
  • 6
    if you are using bootstrap you can do <a class="btn btn-info"></a> and use existing bootstrap styles and avoid defining a new style.
    – stcorbett
    Jul 13, 2015 at 20:09
  • 2
    if you get an underline in your button, add text-decoration:none Mar 14, 2019 at 17:18
108

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 class="btn btn-info"></a>

2
  • 1
    Great. I was using Bootstrap and didn't know that ;P Apr 11, 2014 at 17:19
  • 15
    In recent versions of bootstrap you need a specific btn-* class with the btn class. eg: <a class="btn btn-info"></a>
    – stcorbett
    Jul 13, 2015 at 20:07
17

you can easily wrap a button with a link like so <a href="#"> <button>my button </button> </a>

2
16

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 http://jsfiddle.net/r7v5c/1/ for an example.

1
  • 1
    adding border-radius: 5px; would complete the look.
    – vdbuilder
    Dec 2, 2011 at 21:18
10
  1. Try this:

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    
    <div class="container">
      <h2>Button Tags</h2>
      <a href="#" class="btn btn-info" role="button">Link Button</a>
      <button type="button" class="btn btn-info">Button</button>
      <input type="button" class="btn btn-info" value="Input Button">
      <input type="submit" class="btn btn-info" value="Submit Button">
    </div>

  2. You can use the a href tag line from there.

    <a href="URL" class="btn btn-info" role="button">Button Text</a>
    
0
7

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.

2
  • For current state of browser support, see caniuse.com/#feat=css-appearance ; note that the browser may render appearance: button differently than a native button (at least when I just checked on Chrome 78).
    – SOLO
    Dec 4, 2019 at 19:39
  • this is exactly what I was looking for, but it specifically doesn't work for <a> in chrome. Tested it on <span> and it worked fine.
    – Hashbrown
    Jan 30, 2020 at 23:39
4

None 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="http://www.google.com" class="link_button2">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: https://jsfiddle.net/adamovic/ovu3k0cj/

2

You have got two options for consistency.

  1. Use framework-specific tags, and use them throughout the website.
  2. 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.

2
  • Use the background-image CSS property on the <a> tag
  • Set display:block and adjust width and height in CSS

This should do the trick.

1

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

3
  • you should keep the display: inline; and instead of using height and width , you should use padding and line height to adjust the size of the anchor
    – Antagonist
    Dec 2, 2011 at 13:35
  • @Antagonist: Since the OP wants an image as background and he will most probably always use the same, I dont see why he shouldnt use the specific height and width of that image. But I guess the OP will try all suggested solutions and choose the one that seems best to him.
    – r0skar
    Dec 2, 2011 at 13:41
  • what I'm saying is , to use other css properties to achieve the same thing and maintain the original display property to inline ...
    – Antagonist
    Dec 5, 2011 at 11:46
1

For basic HTML, you can just add an img tag with the src set to your image URL inside the HREF (A)

<a href="http://www.google.com"><img src="http://problemio.com/img/ui/add_problem.png" /></a>
1

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 here and you can even use the css3 button generator

Plenty of styles and choices are here

good luck

1

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="#" class="stylish-button">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>
1
  • I've done this on the past projects and IE refuses to behave. I've tested this code, but I would like to state a concern that needs more justification.
    – MEM
    Jul 27, 2013 at 7:21
1

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 class="button" href="#">Add a problem</a>

0

Tested with Chromium 40 and Firefox 36

<a href="url" style="text-decoration:none">
   <input type="button" value="click me!"/>
</a>
1
  • 2
    This is not valid HTML.
    – Javier
    Dec 19, 2016 at 21:04
0

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 id="aboutus">ABOUT US</button>

//css code

#aboutus{background-color: white;border:none;outline-style: none;}
-1

Try this code:

<code>

    <a href="#" class="button" > 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) - https://youtu.be/euti4HAJJfk

1
  • Welcome to StackOverflow! Please include all relevant code in your post and don't just include a link to an external website. Links are great for additional information, but your post should stand alone from any other resource—links can change or become "dead". Fellow programmers should be able to resolve the problem detailed in the question straight from your answer. Aug 27, 2017 at 2:45
-3

A simple as that :

<a href="#" class="btn btn-success" role="button">link</a>

Just add "class="btn btn-success" & role=button

1
  • 1
    This question doesn't have a bootstrap tag. class="btn btn-success" is a bootstrap class.
    – element11
    Dec 30, 2015 at 17:03

Not the answer you're looking for? Browse other questions tagged or ask your own question.