How to make a href link look like a button

Question

I have this button image    I was wondering whether it would be possible to make a simple  lt a href    gt some words lt  a gt  and style that link to appear as that button   If it is possible  how do I do that

User · Answer

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    lt a href     class  stylish-button  gt Some words lt  a gt    lt style type  text css  gt   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    lt  style gt

User · Answer

You have got two options for consistency    Use framework-specific tags  and use them throughout the website  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        lt button onclick  location href    Homepage html   return false   gt My Button lt  button gt    return false  is to prevent the default behavior of the button being clicked

User · Answer

Tested with Chromium 40 and Firefox 36   lt a href  url  style  text-decoration none  gt      lt input type  button  value  click me    gt   lt  a gt

User · Answer

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   lt a class  btn btn-info  gt  lt  a gt

User · Answer

Like so many others  but with explanation in the css   x000D   x000D     select all  lt a gt  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    x000D   lt a class  button  href     gt Add a problem lt  a gt  x000D   x000D   x000D

User · Answer

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

User · Answer

Try this code    lt code gt        lt a href     class  button   gt  HOME  lt  a gt        lt style type  text css  gt            button   background-color   00CCFF  padding  8px 16px  display  inline-block  text-decoration  none  color   FFFFFF border-radius  3px             button hover   background-color   0066FF          lt  style gt    lt  code gt    Watch this  It will explain how to do it  - https   youtu be euti4HAJJfk

User · Answer

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    lt a href  http   www google com  class  link button2  gt My button lt  a gt    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

User · Answer

A simple as that      lt a href     class  btn btn-success  role  button  gt link lt  a gt    Just add  class  btn btn-success   amp  role button

User · Answer

Try this   x000D   x000D   lt link rel  stylesheet  href  https   maxcdn bootstrapcdn com bootstrap 3 3 7 css bootstrap min css  gt  x000D   lt script src  https   ajax googleapis com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   lt script src  https   maxcdn bootstrapcdn com bootstrap 3 3 7 js bootstrap min js  gt  lt  script gt  x000D   x000D   lt div class  container  gt  x000D     lt h2 gt Button Tags lt  h2 gt  x000D     lt a href     class  btn btn-info  role  button  gt Link Button lt  a gt  x000D     lt button type  button  class  btn btn-info  gt Button lt  button gt  x000D     lt input type  button  class  btn btn-info  value  Input Button  gt  x000D     lt input type  submit  class  btn btn-info  value  Submit Button  gt  x000D   lt  div gt  x000D   x000D   x000D   You can use the a href tag line from there    lt a href  URL  class  btn btn-info  role  button  gt Button Text lt  a gt

User · Answer

Using CSS    x000D   x000D   button   x000D      display  block  x000D      width  115px  x000D      height  25px  x000D      background   4E9CAF  x000D      padding  10px  x000D      text-align  center  x000D      border-radius  5px  x000D      color  white  x000D      font-weight  bold  x000D      line-height  25px  x000D    x000D   lt a class  button  gt Add Problem lt  a gt  x000D   x000D   x000D    http   jsfiddle net GCwQu

User · Answer

Use the background-image CSS property on the  lt a gt  tag Set display block and adjust width and height in CSS   This should do the trick

User · Answer

For basic HTML  you can just add an img tag with the src set to your image URL inside the HREF  A    lt a href  http   www google com  gt  lt img src  http   problemio com img ui add problem png    gt  lt  a gt

User · Answer

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   lt button id  aboutus  gt ABOUT US lt  button gt      css code   aboutus background-color  white border none outline-style  none

User · Answer

you can easily wrap a button with a link like so  lt a href     gt   lt button gt my button   lt  button gt   lt  a gt

User · Answer

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

User · Answer

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

User · Answer

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

[html] How to make <a href=""> link look like a button?

Examples related to html

Examples related to css