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

HtmlCss

Html Problem Overview

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?

Html Solutions

Solution 1 - Html

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/

Solution 2 - Html

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>

Solution 3 - Html

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

Solution 4 - Html

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.

Solution 5 - Html

  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>

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

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

Solution 6 - Html

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.

Solution 7 - Html

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/

Solution 8 - Html

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

Solution 9 - Html

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.

Solution 10 - Html

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

Solution 11 - Html

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>

Solution 12 - Html

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

Solution 13 - Html

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>

Solution 14 - Html

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;
}

Add a problem

Solution 15 - Html

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;}

Solution 16 - Html

Tested with Chromium 40 and Firefox 36

<a href="url" style="text-decoration:none">
   <input type="button" value="click me!"/>
</a>

Solution 17 - Html

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

Solution 18 - Html

A simple as that :

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

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

Categories
Recommended Html Solutions
Recommended Css Solutions

Previous Solution:

how to change namespace of entire project?

C#Visual Studio

Next Solution:

View's SELECT contains a subquery in the FROM clause

MysqlSqlDatabaseViews

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionGeekedOutView Question on Stackoverflow
Solution 1 - HtmlDeclan CookView Answer on Stackoverflow
Solution 2 - HtmlGildas RossView Answer on Stackoverflow
Solution 3 - HtmlAntagonistView Answer on Stackoverflow
Solution 4 - HtmldashView Answer on Stackoverflow
Solution 5 - HtmlSleepy BView Answer on Stackoverflow
Solution 6 - HtmlbotmshView Answer on Stackoverflow
Solution 7 - HtmlMladen AdamovicView Answer on Stackoverflow
Solution 8 - HtmldweevesView Answer on Stackoverflow
Solution 9 - HtmlGhasan غسانView Answer on Stackoverflow
Solution 10 - Htmlr0skarView Answer on Stackoverflow
Solution 11 - Htmlmsmucker0527View Answer on Stackoverflow
Solution 12 - HtmlRdpiView Answer on Stackoverflow
Solution 13 - HtmlgraemeboyView Answer on Stackoverflow
Solution 14 - HtmldjvgView Answer on Stackoverflow
Solution 15 - HtmlSubham choudharyView Answer on Stackoverflow
Solution 16 - HtmlFranz FankhauserView Answer on Stackoverflow
Solution 17 - HtmlD.MadhushanView Answer on Stackoverflow
Solution 18 - HtmllioView Answer on Stackoverflow