¿Cómo hacer que el enlace de <a href= 0000-”> parezca un botón?

Tengo esta imagen de botón:

Me preguntaba si sería posible hacer un <a href="">some words</a>enlace simple y estilizado para que aparezca como ese botón.

Si es posible, ¿cómo lo hago?

Usando 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/

Consulte la documentación de Bootstrap . Existe una clase .btny funciona con la aetiqueta, pero debe agregar una .btn-*clase específica con la.btn clase.

p.ej: <a class="btn btn-info"></a>

puedes envolver fácilmente un botón con un enlace como este <a href="#"> <button>my button </button> </a>

Algo como esto se parecería a un botón:

a.LinkButton {
  border-style: solid;
  border-width : 1px 1px 1px 1px;
  text-decoration : none;
  padding : 4px;
  border-color : #000000
}

Consulte http://jsfiddle.net/r7v5c/1/ para ver un ejemplo.

1. Prueba esto:

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

   Ejecutar fragmento de códigoOcultar resultados

   Expandir fragmento

2. Puedes usar el hrefeslogan a partir de ahí.

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

Si desea evitar la codificación de un diseño específico con css, sino que confía en el botón predeterminado del navegador, puede usar el siguiente css.

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

Tenga en cuenta que probablemente no funcionará en IE.

Ninguna de las otras respuestas muestra el código donde el botón de enlace cambia su apariencia al pasar el mouse.

Esto es lo que hice para solucionarlo:

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/

• Utilice la background-imagepropiedad CSS en el<a> etiqueta
• Establecer display:blocky ajustar widthy heighten CSS

Esto debería funcionar.

Si tu puedes hacerlo.

Aquí hay un ejemplo:

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

Por supuesto, puede modificar el ejemplo anterior según sus necesidades. Lo importante es que aparezca como un bloque ( display:block) o un bloque en línea ( display:inline-block).

Para HTML básico, puede simplemente agregar una etiqueta img con el src configurado a la URL de su imagen dentro del HREF (A)

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

Puede crear una clase para los elementos de ancla que le gustaría mostrar como botones.

P.ej:

Usando una imagen:

.button {
   display:block;
   background: url('image');
   width: same as image
   height: same as image
}

o usando un enfoque CSS puro:

.button {
    background:#E3E3E3;
    border: 1px solid #BBBBBB;
    border-radius: 3px 3px 3px 3px;
}

Recuerde siempre ocultar el texto con algo como:

text-indent: -9999em;

Una excelente galería de botones CSS puros está aquí e incluso puede usar el generador de botones css3

Hay muchos estilos y opciones aquí.

buena suerte

Tienes dos opciones para mantener la coherencia.

1. Utilice etiquetas específicas del marco y utilícelas en todo el sitio web.
2. Use JavaScript para emular un enlace en un elemento de botón y luego haga que el botón sea coherente con el aspecto de los botones del navegador. Esos trucos con apariencia de botones CSS nunca serán precisos.

.

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

return false; es evitar que se haga clic en el comportamiento predeterminado del botón.

Simplemente tome diseños de botones CSS regulares y aplique ese CSS a un enlace (exactamente de la misma manera que lo haría con un botón).

Ejemplo:

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

para aquellos que tienen problemas después de agregar active y focus, asigne un nombre de clase o identificación a su botón y agregue esto a css

por ejemplo

//código HTML

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

// código CSS

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

Probado con Chromium 40 y Firefox 36

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

Prueba este código:

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

Mire esto (le explicará cómo hacerlo) - https://youtu.be/euti4HAJJfk

Tan simple como eso:

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

Simplemente agregue "class =" btn btn-success "& role = button