~/Projects/ui
git clone https://code.lsong.org/ui
Commit
- Commit
- b425f8e3dfcc45f07aae6f9b3abf52e8cb87fc26
- Author
- David Mraz <[email protected]>
- Date
- 2023-08-10 09:19:25 +0200 +0200
- Diffstat
buttons-02/index.html | 28 ++++++++++++++++++++++
buttons-02/style.css | 57 +++++++++++++++++++++++++++++++++++++++++++++
feat: buttons 02
diff --git a/buttons-02/index.html b/buttons-02/index.html
new file mode 100644
index 0000000000000000000000000000000000000000..dd2a70f45a1b36f065ebe62026dc4ed9f1fe3733
--- /dev/null
+++ 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
new file mode 100644
index 0000000000000000000000000000000000000000..f9c7dff6d0b45bddadee6d0f69fba1df5eedf103
--- /dev/null
+++ 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);
+}
+
