Skip to content

Commit 1b1bfb4

Browse files
committedMar 28, 2023
gradient text series
0 parents  commit 1b1bfb4

File tree

2 files changed

+85
-0
lines changed

2 files changed

+85
-0
lines changed
 

‎index.html

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<link rel="stylesheet" href="style.css">
8+
<title>Document</title>
9+
</head>
10+
<body>
11+
<div class="content">
12+
<h1 class="title">Animating gradients (it gradients when you hover)</h1>
13+
<button class="fun">Hover me!</button>
14+
</div>
15+
</body>
16+
</html>

‎style.css

+69
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
:root {
2+
--gradient: linear-gradient(90deg, #ee6352, purple, #ee6352);
3+
4+
}
5+
6+
body {
7+
font-family: basic-sans, sans-serif;
8+
min-height: 100vh;
9+
display: flex;
10+
justify-content: center;
11+
align-items: center;
12+
font-size: 1.125em;
13+
line-height: 1.6;
14+
color: #333;
15+
background: #ddd;
16+
background-size: 300%;
17+
background-image: var(--gradient);
18+
animation: bg-animation 25s infinite;
19+
}
20+
21+
@keyframes bg-animation {
22+
0% {background-position: left}
23+
50% {background-position: right}
24+
100% {background-position: left}
25+
}
26+
27+
.content {
28+
background: white;
29+
width: 70vw;
30+
padding: 3em;
31+
box-shadow: 0 0 3em rgba(0,0,0,.15);
32+
}
33+
34+
.title {
35+
margin: 0 0 .5em;
36+
text-transform: uppercase;
37+
font-weight: 900;
38+
font-style: italic;
39+
font-size: 3rem;
40+
color: #ee6352;
41+
line-height: .8;
42+
margin: 0;
43+
44+
background-image: var(--gradient);
45+
-webkit-background-clip: text;
46+
color: transparent;
47+
background-size: 300%;
48+
transition: background-position 1s;
49+
}
50+
51+
.title:hover {
52+
background-position: right;
53+
}
54+
55+
56+
.fun {
57+
color: white;
58+
border: 0;
59+
cursor: pointer;
60+
padding: .5em 1.25em;
61+
background: linear-gradient(90deg, #ee6352, purple, #ee6352);
62+
background-size: 300%;
63+
background-position: left;
64+
transition: background-position 350ms;
65+
}
66+
67+
.fun:hover {
68+
background-position: right;
69+
}

0 commit comments

Comments
 (0)
Please sign in to comment.