[R] Botón Fantasma en HTML y CSS

Resultado:

Botón Fantasma

Código:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Botón Fantasma</title>
	
	<style>
	
		.boton-fantasma {
			
			/* Dimensiones */
			width: 600px;
			height: 400px;
			background-color: #082032;
			
			/* Posicion */
			margin: auto;
			
			/*Alineaciones*/
			text-align: center;
			line-height: 400px;
			
			
		}
		
		
		.boton-fantasma a {
			
			/*Fuente*/
			font-family: Arial, "sans-serif";
			font-size: 12px;
			font-weight: bold;
			
			/*Apariencia*/
			text-decoration: none;
			color: #f0a500;
			border: 2px solid #f0a500;
			padding: 20px 50px;
			border-radius: 10px;
			
		}
		
		
		.boton-fantasma a:hover {
			/*Apariencia al pasar sobre el boton*/
			color: #082032;
			background-color: #f0a500;
		}
		
	
	</style>
	
</head>

<body>
	
	<div class="boton-fantasma">
		<a href="#">CLICK AQUÍ</a>
	</div>
	
</body>
</html>

<< Regresar a principal

Enlaces adicionales.

Blog
Podcast
Grupo de Facebook
Paletas cromáticas