Added Focus on Shine effect buttons

enjeck · Oct 2, 2023 · d6c96f7 · d6c96f7
1 parent c4d9575
commit d6c96f7
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 7 deletions.
diff --git a/index.html b/index.html
@@ -354,33 +354,33 @@ <h2>Text stretch</h2>
       <div class="buttons-section">
         <h2>Shine effect</h2>
         <div class="btn-box">
-          <div class="btn-container">
-            <button class="btn btn-shine-effect btn-shine-effect--gray">
+          <div class="btn-container" >
+            <button class="btn btn-shine-effect btn-shine-effect--gray" id="focus1">
               <span class="btn-shine-effect-span">Click me</span>
             </button>
           </div>
           <div class="btn-container">
-            <button class="btn btn-shine-effect btn-shine-effect--orange">
+            <button class="btn btn-shine-effect btn-shine-effect--orange" id="focus2">
               <span class="btn-shine-effect-span">Click me</span>
             </button>
           </div>
           <div class="btn-container">
-            <button class="btn btn-shine-effect btn-shine-effect--red">
+            <button class="btn btn-shine-effect btn-shine-effect--red" id="focus3">
               <span class="btn-shine-effect-span">Click me</span>
             </button>
           </div>
           <div class="btn-container">
-            <button class="btn btn-shine-effect btn-shine-effect--blue">
+            <button class="btn btn-shine-effect btn-shine-effect--blue" id="focus4">
               <span class="btn-shine-effect-span">Click me</span>
             </button>
           </div>
           <div class="btn-container">
-            <button class="btn btn-shine-effect btn-shine-effect--green">
+            <button class="btn btn-shine-effect btn-shine-effect--green" id="focus5">
               <span class="btn-shine-effect-span">Click me</span>
             </button>
           </div>
           <div class="btn-container">
-            <button class="btn btn-shine-effect btn-shine-effect--purple">
+            <button class="btn btn-shine-effect btn-shine-effect--purple" id="focus6">
               <span class="btn-shine-effect-span">Click me</span>
             </button>
           </div>

diff --git a/src/styles.css b/src/styles.css
@@ -2433,3 +2433,39 @@ right: 0;
 		margin: 3px 0;
 	}
 
+#focus1:focus{
+			box-shadow: 0 0 0 2px #ffffff, 0 0 3px 5px #333;
+			outline: 2px dotted transparent;
+			outline-offset: 2px;
+
+}
+#focus2:focus {
+	box-shadow: 0 0 0 2px #ffffff, 0 0 3px 5px #feae00;
+	outline: 2px dotted transparent;
+	outline-offset: 2px;
+
+}
+#focus3:focus {
+	box-shadow: 0 0 0 2px #ffffff, 0 0 3px 5px #ef233c;
+	outline: 2px dotted transparent;
+	outline-offset: 2px;
+
+}
+#focus4:focus {
+	box-shadow: 0 0 0 2px #ffffff, 0 0 3px 5px #3a86ff;
+	outline: 2px dotted transparent;
+	outline-offset: 2px;
+
+}
+#focus5:focus {
+	box-shadow: 0 0 0 2px #ffffff, 0 0 3px 5px #80ed99;
+	outline: 2px dotted transparent;
+	outline-offset: 2px;
+
+}
+#focus6:focus {
+	box-shadow: 0 0 0 2px #ffffff, 0 0 3px 5px #3d348b;
+	outline: 2px dotted transparent;
+	outline-offset: 2px;
+
+}