Botón Submit con apariencia de Link [Tip]

0
4657

Un pequeño tip de cómo cambiar la apariencia de un bóton Submit por un enlace ó Link haciendo uso de CSS.

<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Button Link demo</title>
<meta name="author" content="Natalie Downe">
<!-- Date: 2009-06-08 -->

<style type="text/css">
body {
font-family: "Verdana" sans-serif;
}
a:link,
a:visited {
color: blue;
}
a:hover,
a:focus,
a:active {
color: black;
}
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;
}

</style>

</head>
<body>

<form action="#" method="post">
<p><button type="submit" class="link"><span>Hello there I am a button</span></button></p>
</form>

<p><a href="#">Well thats nice, I am a link</a></p>

</body>
</html>

El resultado lo puedes ver aquí. A simple vista no hay diferencia, ambos textos parecen links pero el primero es un botón. 

Vía Ajaxian

Enlace original