Botón con borde degradado

CSS

Ejemplo de un enlace que simula ser un botón y tiene un borde degradado.

Utilizaremos HTML + CSS para crearlo.

En el hover, tiene un efecto que simula aumentar el tamaño de borde del botón.

HTML

<body>
	<a class="btn" href="#" title="Learn More">
		<span>Learn More</span>
	</a>
</body>

CSS

body{
		background-color: #111416;
		padding:  100px;
	}

	.btn{
		font-family: 'Raleway', sans-serif;
		text-decoration: none;
		position: relative;
		z-index: 1;
		display: -webkit-inline-box;
		display: -ms-inline-flexbox;
		display: inline-flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		text-transform: none;
		font-weight: 600;
		letter-spacing: .08em;
		min-width: 240px;
		font-size: 14px;
		padding: 4px 28px;
		height: 56px;
		border-radius: 0;
		overflow: hidden;
		background: 0 0;
		text-transform: uppercase;
		color: #fff;
		-webkit-transition: background 1s cubic-bezier(.16,1,.3,1),border-color 1s cubic-bezier(.16,1,.3,1),color 1s cubic-bezier(.16,1,.3,1);
		transition: background 1s cubic-bezier(.16,1,.3,1),border-color 1s cubic-bezier(.16,1,.3,1),color 1s cubic-bezier(.16,1,.3,1);
	}

	.btn:before {
		content: '';
		display: block;
		position: absolute;
		width: calc(100% - 2px);
		height: calc(100% - 2px);
		top: 1px;
		left: 1px;
		background: #111416;
		z-index: -2;
		-webkit-transform: translate3d(0,0,0);
		transform: translate3d(0,0,0);
		-webkit-transition: opacity 1s cubic-bezier(.16,1,.3,1);
		transition: opacity 1s cubic-bezier(.16,1,.3,1);
	}

	.btn:after {
		content: '';
		width: 100%;
		height: 100%;
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		-webkit-transform: translate3d(0,0,0);
		transform: translate3d(0,0,0);
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
		z-index: -3;
		background: linear-gradient(94.23deg,#2446cc 12.41%,#cc8b7d  52.55%,#e14141 89.95%);

		 
	}

	.btn:hover:before{
		margin-top: 1px;
		margin-left: 1px;
		width: calc(100% - 4px);
		height: calc(100% - 4px);
	}

Resultado

Escribe una respuesta


38 − 29 =