Rainbow Bordered Button

index.html

<div>
	<a class="btn" href="#">
		Rainbow Bordered Button
	</a>
</div>

rainbow-bordered-button.markdown

Rainbow Bordered Button

A Pen by Stephy on CodePen.

License.

style.scss

// General Staging

body {
	font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
		         Helvetica Neue, Helvetica, Arial, sans-serif;
    font-weight: 300;
	font-size: 112.5%;
	line-height: 1.4;
	background: url(http://cdn.backgroundhost.com/backgrounds/subtlepatterns/green_dust_scratch.png) #909ca2;
}

div {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

// The Effect

.btn {
    background: #113546;
    color: #fff;
    display: inline-block;
    padding: 0.2rem 0.5rem;
    margin: 0.5rem;
    position: relative;
    border-radius: 3px;
	text-decoration: none;
    cursor: pointer;
	box-sizing: border-box;
    transition: all 0.1s ease-in-out;
	
	&:hover {
		background: #021f2c;
		color: #fff;
		
		&:after {
			border-color: #021f2c;
		}
	}
	
	&:after {
		content: '';
		display: inline-block;
		position: absolute;
		left: -0.5rem;
		top: -0.5rem;
		width: calc(100% + (1rem));
		height: calc(100% + (1rem));
		z-index: -1;
		border: 0.375rem solid #113546;
		border-radius: 10px;
		background: linear-gradient(45deg,
			        #ec5f67, #f99157, #fac863, #99c794,
			        #5fb3b3, #6699cc, #c594c5); // Oceanic Next ♡
		box-sizing: inherit;
	}
	
	&:active:after {
		box-shadow: inset 0 0 0.5rem #000;
	}
}