<!-- this script is provided by http://www.htmlfreecode.com coded by: Kerixa Inc. -->
<style>
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@600&display=swap");

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Open Sans", sans-serif;
}

body {
    display: flex;
    min-height: 100vh;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

section {
    position: relative;
    display: flex;
    min-height: 100vh;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: #78ddff;
}

#atag {
    position: relative;
    display: inline-block;
    padding: 15px 30px;
    text-transform: uppercase;
    border: 2.1px solid #322;
    color: #111;
    text-decoration: none;
    font-weight: 600;
    font-size: 20px;
    background-image: linear-gradient( 225deg, rgba(245, 33, 255, 1) 0%, rgba(64, 35, 255, 1) 16%, rgba(37, 254, 255, 1) 32%, rgba(54, 255, 39, 1) 47%, rgba(255, 252, 41, 1) 66%, rgba(255, 156, 43, 1) 84%, rgba(255, 46, 46, 1) 100% );
    transition: 1s;
    background-repeat: no-repeat;
}

#atag:before {
	content: "";
	position: absolute;
	top: 6px;
	left: -2px;
	width: calc(100% + 4px);
	height: calc(100% - 12px);
	background: #fff;
	transition: 0.5s ease-in-out;
	transform: scaleY(1);
	transition-delay: 0.5s;
}

#atag:hover:before {
	transform: scaleY(0);
}

#atag:after {
	content: "";
	position: absolute;
	left: 6px;
	top: -2px;
	height: calc(100% + 4px);
	width: calc(100% - 12px);
	background: #fff;
	transition: 0.5s ease-in-out;
	transform: scaleX(1);
}

#atag:hover:after {
	transform: scaleX(0);
}

#atag:hover {
	color: #fff;
	transition: 1s;
}

#atag span {
	position: relative;
	z-index: 3;
}

@keyframes animate {
    0% {
        filter: hue-rotate(0deg);
    }

    100% {
        filter: hue-rotate(360deg);
    }
}
</style>
<section>
	<a href="#" id="atag">
		<span>
			Button
		</span>
	</a>
</section>
<a target='_blank' href='http://www.htmlfreecode.com' style='font-size: 8pt; text-decoration: none'>Html Free Codes</a>