feat: animation

Zuppremo · Feb 1, 2024 · f7e4724 · f7e4724
1 parent 1c727e6
commit f7e4724
Show file tree

Hide file tree

Showing 2 changed files with 78 additions and 0 deletions.
diff --git a/animation-02/index.html b/animation-02/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+ <meta charset="UTF-8">
+ <title>Buttons</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+ <a class="button" href="https://learning.atheros.ai" title="Learn more about web development">
+ <svg height="60" width="300" xmlns="http://www.w3.org/2000/svg">
+ <rect class="shape" height="60" width="300" />
+ <div class="text">Learn CSS</div>
+ </svg>
+ </a>
+</body>
+
+</html>
diff --git a/animation-02/style.css b/animation-02/style.css
@@ -0,0 +1,58 @@
+:root {
+ --bg: #171717;
+ --text-color: #fff;
+ --accent: cyan;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: 'Mulish', sans-serif;
+ background: var(--bg);
+ display: flex;
+ height: 100vh;
+ align-items: center;
+
+}
+
+.button {
+ display: inline-block;
+ max-width: 20rem;
+ margin: 0 auto;
+ text-align: center;
+ text-transform: uppercase;
+ text-decoration: none;
+ position: relative;
+}
+
+.shape {
+ fill: transparent;
+ stroke: var(--accent);
+ stroke-dasharray: 120 500;
+ stroke-dashoffset: -454;
+ stroke-width: 8px;
+ transition:
+ stroke-width 0.9s,
+ stroke-dashoffset 0.9s,
+ stroke-dasharray 0.9s;
+}
+
+.text {
+ font-size: 1.4rem;
+ line-height: 2rem;
+ letter-spacing: 0.3rem;
+ color: var(--text-color);
+ top: -3rem;
+ position: relative;
+ pointer-events: none;
+}
+
+.shape:hover {
+ stroke-width: 3px;
+ stroke-dashoffset: 0;
+ stroke-dasharray: 760;
+}