How do I make a <a href=""> link look like a button?

Question

I have this button image:

I was wondering if it’s possible to create a simple style <a href="">some words</a> and a style that will display like this button?

If possible, how to do it?

Answer 1

CSS usage:

 .button { display: block; width: 115px; height: 25px; background: #4E9CAF; padding: 10px; text-align: center; border-radius: 5px; color: white; font-weight: bold; } 

 <a class="button">Add Problem</a> 

http://jsfiddle.net/GCwQu/

Answer 2

Check Bootstrap Docs . The .btn class exists and works with the a tag, but you need to add a specific .btn-* class with the .btn class.

for example: <a class="btn btn-info"></a>

Answer 3

Something like this will 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.

Answer 4

you can easily wrap the button with a link this way <a href="#"> <button>my button </button> </a>

Answer 5

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. From there you can use the href tag string.

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

Answer 6

If you want to avoid hard-coding a particular design using css, but rather rely on the default browser button, you can use the following css.

 a.button { -webkit-appearance: button; -moz-appearance: button; appearance: button; } 

Please note that it probably won't work in IE.

Answer 7

None of the other answers show code in which the link button changes its appearance on hover.

Here is what I did to fix this:

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/

Answer 8

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

That should do the trick.

Answer 9

Yes you can do it.

Here is an example:

 a{ background:IMAGE-URL; display:block; height:IMAGE-HEIGHT; width:IMAGE-WIDTH; } 

Of course, you can change the above example to your needs. It is important that it is displayed as a block ( display:block ) or an inline block ( display:inline-block ).

Answer 10

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

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

Answer 11

You can create a class for the snap elements that you want to display as buttons.

For example:

Image Usage:

 .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 text with:

 text-indent: -9999em; 

Great gallery of clean CSS buttons here and you can even use the css3 button generator

Lots of styles and options here.

luck

Answer 12

Just use regular css buttons and apply this CSS to the link (exactly the same as to the 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> 

Answer 13

You have two options for consistency.

• Use platform-specific tags and use them on the website.
• Use JavaScript to emulate the link to the button element, and then the button corresponding to the browser buttons. These css hack buttons will never be exact.

.

 <button onclick="location.href = 'Homepage.html'; return false;">My Button</button> 

return false; is to prevent the default button from being clicked.

Answer 14

for those who have problems after adding active and focus, give the button the name of the class or identifier and add it to css

eg

// HTML code

 <button id="aboutus">ABOUT US</button> 

// css code

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

Answer 15

Tested with Chromium 40 and Firefox 36

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

Answer 16

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> 

Keep track of this (he will explain how to do this) - https://youtu.be/euti4HAJJfk

Answer 17

Simple:

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

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