css - link - ¿Cómo hacer que el botón parezca un enlace?

html title attribute style

Question

Necesito hacer que un botón parezca un enlace usando CSS. Los cambios se realizan, pero cuando hago clic en él, se muestra como si se hubiera presionado como en un botón. ¿Alguna idea de cómo eliminar eso, para que el botón funcione como un enlace incluso cuando se hace clic?

Answer 1

HTML

<button>your button that looks like a link</button>

CSS

button {
     background:none!important;
     color:inherit;
     border:none; 
     padding:0!important;
     font: inherit;
     /*border is optional*/
     border-bottom:1px solid #444; 
     cursor: pointer;
}

Ver Demo (en JSfiddle)

Answer 2

El código de la respuesta aceptada funciona para la mayoría de los casos, pero para obtener un botón que realmente se comporte como un enlace, se necesita un poco más de código. Es especialmente difícil obtener el estilo de los botones enfocados en Firefox (Mozilla).

El siguiente CSS garantiza que los anclajes y los botones tengan las mismas propiedades de CSS y se comporten de la misma forma en todos los navegadores comunes:

button {
  align-items: normal;
  background-color: rgba(0,0,0,0);
  border-color: rgb(0, 0, 238);
  border-style: none;
  box-sizing: content-box;
  color: rgb(0, 0, 238); 
  cursor: pointer;
  display: inline;
  font: inherit;
  height: auto;
  padding: 0;
  perspective-origin: 0 0;
  text-align: start;
  text-decoration: underline;
  transform-origin: 0 0;
  width: auto;
  -moz-appearance: none;
  -webkit-logical-height: 1em; /* Chrome ignores auto, so we have to use this hack to set the correct height  */
  -webkit-logical-width: auto; /* Chrome ignores auto, but here for completeness */
}

/* Mozilla uses a pseudo-element to show focus on buttons, */
/* but anchors are highlighted via the focus pseudo-class. */

@supports (-moz-appearance:none) { /* Mozilla-only */
  button::-moz-focus-inner { /* reset any predefined properties */ 
    border: none;
    padding: 0;
  }
  button:focus { /* add outline to focus pseudo-class */
    outline-style: dotted;
    outline-width: 1px;
  }
}

El ejemplo anterior solo modifica los elementos del button para mejorar la legibilidad, pero puede extenderse fácilmente para modificar los elementos de input[type="button"], input[type="submit"] e input[type="reset"] . También puede usar una clase, si desea que solo ciertos botones se vean como anclajes.

Ver este JSFiddle para una demostración en vivo.

Tenga en cuenta que esto aplica el estilo de ancla predeterminado a los botones (por ejemplo, color de texto azul). Por lo tanto, si desea cambiar el color del texto o cualquier otra cosa de los anclajes y botones, debe hacer esto después del CSS anterior.

El código original (ver fragmento) en esta respuesta fue completamente diferente e incompleto.

/* Obsolete code! Please use the code of the updated answer. */

input[type="button"], input[type="button"]:focus, input[type="button"]:active,  
button, button:focus, button:active {
 /* Remove all decorations to look like normal text */
 background: none;
 border: none;
 display: inline;
 font: inherit;
 margin: 0;
 padding: 0;
 outline: none;
 outline-offset: 0;
 /* Additional styles to look like a link */
 color: blue;
 cursor: pointer;
 text-decoration: underline;
}
/* Remove extra space inside buttons in Firefox */
input[type="button"]::-moz-focus-inner,
button::-moz-focus-inner {
    border: none;
    padding: 0;
}

Answer 3

No puede diseñar botones como enlaces de forma fiable en todos los navegadores. Lo he intentado, pero siempre hay problemas extraños de relleno, margen o fuente en algunos navegadores. Vive con dejar que el botón se vea como un botón, o usa onClick and preventDefault en un enlace.

Answer 4

Puede lograr esto usando css simple como se muestra en el siguiente ejemplo.

button {
    overflow: visible;
    width: auto;
}
button.link {
    font-family: "Verdana" sans-serif;
    font-size: 1em;
    text-align: left;
    color: blue;
    background: none;
    margin: 0;
    padding: 0;
    border: none;
    cursor: pointer;
   
    -moz-user-select: text;
 
    /* override all your button styles here if there are any others */
}
button.link span {
    text-decoration: underline;
}
button.link:hover span,
button.link:focus span {
    color: black;
}

<button type="submit" class="link"><span>Button as Link</span></button>

Answer 5

Si no le importa usar el programa de arranque de Twitter, le sugiero que simplemente use la clase de enlace .

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<button type="button" class="btn btn-link">Link</button>

Espero que esto ayude a alguien :) ¡Que tengas un buen día!

Answer 6

intenta usar el css pseudoclass :focus

input[type="button"], input[type="button"]:focus {
  /* your style goes here */
}

edite en cuanto a los enlaces y el uso de los eventos onclick (no debe usar manejadores de eventos javascript en línea, pero por simplicidad los usaré aquí):

<a href="some/page.php" title="perform some js action" onclick="callFunction(this.href);return false;">watch and learn</a>

Con this.href incluso puede acceder al destino del enlace en su función. return false solo evitará que los navegadores sigan el enlace cuando se haga clic.

si javascript está deshabilitado, el enlace funcionará como un enlace normal y solo cargará some/page.php si desea que su enlace esté muerto cuando js esté deshabilitado, use href="#"