Button Border with Rainbow Animating Background

Written by @kerixa 9 March 2021

Websites often use different buttons to enter different pages and sections of them, and the more beautiful and attractive these buttons are, the better. Most of the audience's attention is drawn to the dynamic sections of a web page. Therefore, the use of animation in buttons, such as the following code, makes the website more beautiful. In the following code, the background of the button animates with a rainbow style on mouse hover.

Code Snippet:

                                                
                                                <!-- this script is provided by https://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='https://www.htmlfreecode.com' style='font-size: 8pt; text-decoration: none'>Html Free Codes</a>

Example:

About @kerixa

I am Krishna Eydat. I studied Software Engineering at University of Waterloo in Canada. I lead a few tech companies. I am passionate about the way we are connected. I would like to be part of something big or be the big deal!

Comments

Here you can leave us commments. Let us know what you think about this code tutorial!

0 / 300