Animar botón con CSS

Animación de colores a un botón solo usando estilos css haciendo uso de tres colores y el seudoestado before, con keyframes obteniendo el efecto luz neón

Obtendremos el efecto luz de neón con el siguiente código

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style>
	body{ 
		background: url(bg.jpg);
		background-size: cover;
		margin: 0;
		padding: 0;
		height: 500px;		
	 }
	 #app{
	 	display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
	 }
	 .box{
	 	text-align: center;
    	display: block;
	 }
	.btn{
		position: relative;		
		background: linear-gradient(90deg,#03a9f4,#f441a5,#ffeb3b,#03a9f4);
		background-size: 400%;		
		border-radius: 60px;
		color: white;
		font-size: 20px;
		z-index: 1;
		padding: 20px 50px;
		text-decoration: none;
		animation: animate 5s linear infinite;		
	}
	.btn:hover{  animation: animate 5s linear infinite; }
	@keyframes animate{
		0%{ background-position: 0%; }
		100%{ background-position: 400%; }
	}
	.btn:before{
		content: '';
		transition: 0.5s;
		top: -5px;
		left: -15px;
		right: -15px;
		bottom: -5px;
		position: absolute;
		z-index: -1;
		border-radius: 40px;
		background: linear-gradient(90deg,#03a9f4,#f441a5,#ffeb3b,#03a9f4);
		background-size: 400%;
		opacity: 0;
	}
	.btn:hover:before{
		filter: blur(20px);
		opacity: 1;
		animation: animate 5s linear infinite;
	}
	h1{
	color: white;
    font-family: fantasy;
    font-weight: 100;
    letter-spacing: 20px;
    font-size: 50px;
    text-shadow: black 0px 0px 3px;
	}		
	</style>	
</head>
<body>
<div id="app">	
	<div class="box">
		<h1>APPTIVAWEB.COM</h1>
		<a href="" class="btn">ACCESS</a>
	</div>
</div>
</body>
</html>

VER DEMO CLIK AQUI

Hasta un próximo tutorial de css avanzado

 

 

VIDEO Cómo animar un botón con CSS usando keyframes

Visitas: 122 | Publicado:2018-12-25 14:02:28

Publicaciones que te pueden interesar

Facebook Twitter Youtube Pinterest Wordpress Google Plus

:: Calle Paucarpata 130 Of. 212 2do Piso CC. AQPcompucentro ::
:: © Todos los derechos reservados APPTIVA WEB | Arequipa Perú 2010-2018 ::