feat: buttons 02

Ellynnon99 · Aug 10, 2023 · b425f8e · b425f8e
1 parent 58b098f
commit b425f8e
Show file tree

Hide file tree

Showing 2 changed files with 85 additions and 0 deletions.
diff --git a/buttons-02/index.html b/buttons-02/index.html
@@ -0,0 +1,28 @@
+
+<!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>
+        <span class="background">
+            <a
+                href="https://learning.atheros.ai"
+                class='button'
+                title="Learn"
+            >
+                Learn
+            </a>            
+        </span>
+    </body>
+</html>
+
+
+
+
diff --git a/buttons-02/style.css b/buttons-02/style.css
@@ -0,0 +1,57 @@
+
+@import url('https://fonts.googleapis.com/css2?family=Mulish&display=swap');
+
+:root {
+    --background: #2C2C2C;
+    --accent: #FF9950;
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;  
+}
+
+html {
+    font-family: 'Mulish';
+    font-size: 16px;
+}
+
+.background {
+    background-color: var(--background);
+    display: grid;
+    place-items: center;
+    height: 100vh;
+}
+
+.button {
+    border: 0px solid;
+    outline: 2px solid;
+    color: white;
+    outline-color: white;
+    outline-offset: 0px;
+    text-shadow: none;
+    cursor: pointer;
+    font-size: 1rem;
+    line-height: 2.5rem;
+    max-width: 160px; 
+    width: 100%; 
+    letter-spacing: 0.3rem;
+    font-weight: 600;
+    position: relative;
+    text-decoration: none;
+    text-transform: uppercase;
+    display: flex;
+    justify-content: center;
+    transition: all 550ms cubic-bezier(
+        .36,.63,.5,.73
+    );
+}
+
+.button:hover {
+    border: 2px solid var(--accent);
+    outline-color: rgba(255, 255, 255, 0);
+    outline-offset: 15px;
+    color: var(--accent);
+}
+