Rework button color system

baerchen201 · Oct 15, 2024 · 2827498 · 2827498
1 parent 89524bd
commit 2827498
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 12 deletions.
diff --git a/css/index.css b/css/index.css
@@ -114,9 +114,9 @@ donut-js {
 }
 
 baer1-button {
-  --color: 50, 50, 50;
-  --text-color: 255, 255, 255;
-  --hover-color: 100, 100, 100;
+  --color: rgb(50, 50, 50);
+  --text-color: rgb(255, 255, 255);
+  --hover-color: rgb(100, 100, 100);
   height: 50px;
   width: 100%;
   display: flex;
@@ -127,15 +127,15 @@ baer1-button {
   overflow: hidden;
 
   border-radius: 100px;
-  background: rgb(var(--color));
-  color: rgb(var(--text-color));
+  background: var(--color);
+  color: var(--text-color);
   font-weight: 300;
   transition: background 0.4s, transform 0.2s;
   cursor: pointer;
 }
 baer1-button:hover {
-  background: rgb(var(--hover-color));
-  box-shadow: 0 0 20px rgba(var(--hover-color), 0.314);
+  background: var(--hover-color);
+  box-shadow: 0 0 20px color-mix(in srgb, var(--hover-color), transparent 66%);
   transform: scale(1.1);
   z-index: 2;
 }

diff --git a/index.html b/index.html
@@ -57,31 +57,31 @@ <h2 style="padding-bottom: 25px">Creating websites since 2017</h2>
       <div id="buttons">
         <baer1-button
           href="https://github.com/baerchen201"
-          style="--color: 36, 41, 46; --hover-color: 43, 49, 55"
+          style="--color: rgb(36, 41, 46); --hover-color: rgb(43, 49, 55)"
           logo="img/github.svg"
         >
           Github
         </baer1-button>
 
         <baer1-button
           href="https://discord.com/users/1251935949626150922"
-          style="--color: 88, 101, 242; --hover-color: 109, 121, 255"
+          style="--color: rgb(88, 101, 242); --hover-color: rgb(109, 121, 255)"
           logo="img/discord.svg"
         >
           Discord
         </baer1-button>
 
         <baer1-button
           href="https://steamcommunity.com/id/baerchen201"
-          style="--color: 27, 40, 56; --hover-color: 42, 71, 94"
+          style="--color: rgb(27, 40, 56); --hover-color: rgb(42, 71, 94)"
           logo="img/steam.svg"
         >
           Steam
         </baer1-button>
 
         <baer1-button
           href="https://youtube.com/@baer1"
-          style="--color: 40, 40, 40; --hover-color: 255, 0, 0"
+          style="--color: rgb(40, 40, 40); --hover-color: rgb(255, 0, 0)"
           id="youtube"
         >
           <div>
@@ -104,7 +104,7 @@ <h2 style="padding-bottom: 25px">Creating websites since 2017</h2>
 
         <baer1-button
           href="https://t.me/baer1"
-          style="--color: 36, 161, 222; --hover-color: 111, 197, 255"
+          style="--color: rgb(36, 161, 222); --hover-color: rgb(111, 197, 255)"
           logo="img/telegram.svg"
           id="telegram"
         >