Home > Article > Web Front-end > Use css to achieve cool effects on the login button (with code examples)
Use css to achieve cool effects on the login button (with code examples)
- 藏色散人forward
- 2023-04-05 16:16:381857browse
Today I saw a cool login button effect on the Internet; it felt awesome at first glance; but after putting it aside bit by bit, I found that it is not that difficult; I will post all the code ; If there is anything wrong, please tell me.
Analysis
Let’s put aside the before; in fact, the principle is to achieve the color gradient effect through the background size and matching position.
- text-transform: uppercase; refers to converting letters to uppercase
- Then set the background and background size
- Change it when the mouse moves into (hover) the button Just position it
Effect 1:
This effect won’t be so cool, or flashy; I think if When writing some effects, this should be more suitable, and then just match the colors you need.
Copy the code to preview
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 230px;
height: 90px;
line-height: 90px;
text-align: center;
color: #fff;
font-size: 25px;
text-transform: uppercase;
cursor: pointer;
background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
background-size: 400%;
border-radius: 60px;
}
.btn:hover {
animation: animate 8s linear infinite;
}
@keyframes animate {
0% {
background-position: 0%;
}
100% {
background-position: 400%;
}
}
</style>
</head>
<body>
<b href="#">register</b>
</body>
</html>Effect 2:
)
Copy the code to preview
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 230px;
height: 90px;
line-height: 90px;
text-align: center;
color: #fff;
font-size: 25px;
text-transform: uppercase;
cursor: pointer;
background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
background-size: 400%;
border-radius: 60px;
}
.btn:hover {
animation: animate 8s linear infinite;
}
@keyframes animate {
0% {
background-position: 0%;
}
100% {
background-position: 400%;
}
}
.btn::before {
content: '';
position: absolute;
top: -5px;
left: -5px;
right: -5px;
bottom: -5px;
z-index: -1;
background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
background-size: 400%;
border-radius: 40px;
opacity: 0;
transition: 0.5s;
}
.btn:hover::before {
filter: blur(20px);
opacity: 1;
animation: animate 8s linear infinite;
}
</style>
</head>
<body>
<b href="#">register</b>
</body>
</html>That’s all for today! You can copy the above code to show the effect. After looking at all kinds of cool styles on the Internet, I found that I am really a novice; I hope that in the future, I will read more cool styles written on the Internet. If I see any interesting ones, I will send them to you when the time comes. Come here to record it; I hope you will learn more and more in the future! Promote learning: "css video tutorial"
The above is the detailed content of Use css to achieve cool effects on the login button (with code examples). For more information, please follow other related articles on the PHP Chinese website!