Gradient Text Border Background Buttons and Animation
Dhanjee Rider
Enhance Your Web Design with Gradient Text Border Background Buttons and Animation
In the dynamic world of web design, creativity knows no bounds. One way to make your website visually appealing and engaging is by using gradient text border background buttons with animation. These buttons are not only eye-catching but also offer an interactive and stylish way to navigate through your site. In this article, we'll explore how to create and use these captivating buttons.
The Power of Gradients
Gradients have become a popular design choice in recent years. They add depth and dimension to elements, making them stand out. The use of gradients in web design can range from subtle to bold, depending on the desired effect. In our case, we'll focus on gradient buttons that make use of different colors to create a visually striking effect.
Creating Gradient Buttons
To create gradient buttons, we need to define the gradients for each button. In the provided code snippet, we have five different button classes: b-green, b-pink, b-red, b-orange, and b-blue. Each class has a unique gradient applied to it, giving the button a distinct color scheme. This differentiation is what makes these buttons visually appealing.
<div class="ctn">
<a href="#" class="button b-green">Green Button</a>
<a href="#" class="button b-pink">Pink Button</a>
<a href="#" class="button b-red">Red Button</a>
<a href="#" class="button b-orange">Orange Button</a>
<a href="#" class="button b-blue">Blue Button</a>
<br/>
<a href="#" class="button2 b-green rot-135">Green button</a>
<a href="#" class="button2 b-pink rot-135">Pink button</a>
<a href="#" class="button2 b-red rot-135">Red button</a>
<a href="#" class="button2 b-orange rot-135">Orange button</a>
<a href="#" class="button2 b-blue rot-135">Blue button</a>
</div>
<style>
body,
.button:after {
background: #2c3e50;
}
.ctn {
display: block;
margin: auto;
text-align: center;
}
footer {
position: fixed;
bottom: 5px;
right: 5px;
color: #fff;
}
footer a,
footer a:after {
font-size: 1em !important;
}
/*END BODY*/
/*GRADIENTS*/
/*GREEN*/
.b-green,
.b-green:before {
background: rgba(73, 155, 234, 1);
background: -moz-linear-gradient(
45deg,
rgba(73, 155, 234, 1) 0%,
rgba(26, 188, 156, 1) 100%
);
background: -webkit-gradient(
left bottom,
right top,
color-stop(0%, rgba(73, 155, 234, 1)),
color-stop(100%, rgba(26, 188, 156, 1))
);
background: -webkit-linear-gradient(
45deg,
rgba(73, 155, 234, 1) 0%,
rgba(26, 188, 156, 1) 100%
);
background: -o-linear-gradient(
45deg,
rgba(73, 155, 234, 1) 0%,
rgba(26, 188, 156, 1) 100%
);
background: -ms-linear-gradient(
45deg,
rgba(73, 155, 234, 1) 0%,
rgba(26, 188, 156, 1) 100%
);
background: linear-gradient(
45deg,
rgba(73, 155, 234, 1) 0%,
rgba(26, 188, 156, 1) 100%
);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#499bea', endColorstr='#1abc9c', GradientType=1 );
}
/*PINK*/
.b-pink,
.b-pink:before {
background: rgba(231, 72, 234, 1);
background: -moz-linear-gradient(
45deg,
rgba(231, 72, 234, 1) 0%,
rgba(75, 26, 188, 1) 100%
);
background: -webkit-gradient(
left bottom,
right top,
color-stop(0%, rgba(231, 72, 234, 1)),
color-stop(100%, rgba(75, 26, 188, 1))
);
background: -webkit-linear-gradient(
45deg,
rgba(231, 72, 234, 1) 0%,
rgba(75, 26, 188, 1) 100%
);
background: -o-linear-gradient(
45deg,
rgba(231, 72, 234, 1) 0%,
rgba(75, 26, 188, 1) 100%
);
background: -ms-linear-gradient(
45deg,
rgba(231, 72, 234, 1) 0%,
rgba(75, 26, 188, 1) 100%
);
background: linear-gradient(
45deg,
rgba(231, 72, 234, 1) 0%,
rgba(75, 26, 188, 1) 100%
);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e748ea', endColorstr='#4b1abc', GradientType=1 );
}
/*RED*/
.b-red,
.b-red:before {
background: rgba(234, 110, 72, 1);
background: -moz-linear-gradient(
45deg,
rgba(234, 110, 72, 1) 0%,
rgba(188, 26, 99, 1) 100%
);
background: -webkit-gradient(
left bottom,
right top,
color-stop(0%, rgba(234, 110, 72, 1)),
color-stop(100%, rgba(188, 26, 99, 1))
);
background: -webkit-linear-gradient(
45deg,
rgba(234, 110, 72, 1) 0%,
rgba(188, 26, 99, 1) 100%
);
background: -o-linear-gradient(
45deg,
rgba(234, 110, 72, 1) 0%,
rgba(188, 26, 99, 1) 100%
);
background: -ms-linear-gradient(
45deg,
rgba(234, 110, 72, 1) 0%,
rgba(188, 26, 99, 1) 100%
);
background: linear-gradient(
45deg,
rgba(234, 110, 72, 1) 0%,
rgba(188, 26, 99, 1) 100%
);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ea6e48', endColorstr='#bc1a63', GradientType=1 );
}
/*ORANGE*/
.b-orange,
.b-orange:before {
background: rgba(255, 193, 7, 1);
background: -moz-linear-gradient(
45deg,
rgba(255, 193, 7, 1) 0%,
rgba(255, 87, 34, 1) 100%
);
background: -webkit-gradient(
left bottom,
right top,
color-stop(0%, rgba(255, 193, 7, 1)),
color-stop(100%, rgba(255, 87, 34, 1))
);
background: -webkit-linear-gradient(
45deg,
rgba(255, 193, 7, 1) 0%,
rgba(255, 87, 34, 1) 100%
);
background: -o-linear-gradient(
45deg,
rgba(255, 193, 7, 1) 0%,
rgba(255, 87, 34, 1) 100%
);
background: -ms-linear-gradient(
45deg,
rgba(255, 193, 7, 1) 0%,
rgba(255, 87, 34, 1) 100%
);
background: linear-gradient(
45deg,
rgba(255, 193, 7, 1) 0%,
rgba(255, 87, 34, 1) 100%
);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffc107', endColorstr='#ff5722', GradientType=1 );
}
/*BLUE*/
.b-blue,
.b-blue:before {
background: rgba(5, 118, 255, 1);
background: -moz-linear-gradient(
45deg,
rgba(5, 118, 255, 1) 0%,
rgba(36, 248, 255, 1) 100%
);
background: -webkit-gradient(
left bottom,
right top,
color-stop(0%, rgba(5, 118, 255, 1)),
color-stop(100%, rgba(36, 248, 255, 1))
);
background: -webkit-linear-gradient(
45deg,
rgba(5, 118, 255, 1) 0%,
rgba(36, 248, 255, 1) 100%
);
background: -o-linear-gradient(
45deg,
rgba(5, 118, 255, 1) 0%,
rgba(36, 248, 255, 1) 100%
);
background: -ms-linear-gradient(
45deg,
rgba(5, 118, 255, 1) 0%,
rgba(36, 248, 255, 1) 100%
);
background: linear-gradient(
45deg,
rgba(5, 118, 255, 1) 0%,
rgba(36, 248, 255, 1) 100%
);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0576ff', endColorstr='#24f8ff', GradientType=1 );
}
/*END GRADIENTS*/
/*BASE BUTTON*/
.button {
display: inline-block;
position: relative;
border-radius: 3px;
text-decoration: none;
padding: 0.5em;
margin: 0.5em;
font-size: 2em;
font-weight: bold;
transition: all 0.5s;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.button:hover {
text-shadow: 0px 0px 0px rgba(255, 255, 255, 0.75);
}
.button:hover:after {
left: 100%;
top: 100%;
bottom: 100%;
right: 100%;
}
.button:before {
content: "";
display: block;
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
z-index: -1;
border-radius: 5px;
transition: all 0.5s;
}
.button:after {
content: "";
display: block;
position: absolute;
left: 2px;
top: 2px;
bottom: 2px;
right: 2px;
z-index: -1;
border-radius: 5px;
transition: all 0.5s;
}
.button2 {
display: inline-block;
font-size: 2em;
margin: 0.5em;
padding: 0.5em;
border-radius: 5px;
transition: all 0.5s;
filter: hue-rotate(0deg);
color: #fff;
text-decoration: none;
}
/*END BASE BUTTON*/
/*ROTATE*/
.rot-360-noscoop:hover {
filter: hue-rotate(360deg);
transform: rotate(360deg);
}
.rot-135:hover {
filter: hue-rotate(135deg);
}
.rot-90:hover {
filter: hue-rotate(90deg);
}
/*END ROTATE*/
</style>
Interactive Animation
The interactive aspect of these buttons is what takes them to the next level. When a user hovers over a button, it triggers an animation. In the code snippet, you'll notice classes like rot-135, rot-90, and rot-360-noscoop. These classes add animation effects to the buttons when they are hovered over. For example, rot-135 applies a 135-degree hue rotation to the button, changing its color dynamically. These animations make the buttons more engaging and draw the user's attention.
Using Gradient Buttons
To incorporate these gradient buttons into your website, you can simply add the corresponding button classes to your HTML elements. The code snippet provides a basic structure with sample buttons. You can customize the text, links, and other properties to fit your website's design.
Conclusion
In the ever-evolving landscape of web design, standing out and captivating your audience is essential. Gradient text border background buttons with interactive animations offer a creative and visually appealing way to enhance user experience on your website. By integrating these buttons into your design, you can create a more engaging and aesthetically pleasing online presence. So, go ahead and experiment with these gradient buttons to see how they can transform your website's look and feel.
Last word
In this post we will provided information about Gradient Text Border Background Buttons and Animation, If you enjoy this post, kindly share it with your friends. For any queries, feel free to join our Telegram channel, where we share exclusive and informative content. Many valuable tips are exclusively available on our Telegram channel. Stay updated with your favorite source, DK Technozone.
