Merge pull request #226 from meshery/btn-animation

Btn animation
meshery · Oct 29, 2024 · 50d1b4c · 50d1b4c
2 parents 1ddee9a + 8e9a73f
commit 50d1b4c
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 1 deletion.
diff --git a/site/src/App.js b/site/src/App.js
@@ -55,7 +55,7 @@ const App = () => {
           <section className="playground-btn">
 
               <div>
-              <Button className="continue-btn" style={{ background: "rgb(235, 192, 23)" }} role="button"  onClick={openModal}>
+              <Button className="continue-btn open-playground-btn" style={{ background: "rgb(235, 192, 23)" }} role="button"  onClick={openModal}>
                 Open Playground
               </Button>
               <Modal

diff --git a/site/src/App.style.js b/site/src/App.style.js
@@ -283,6 +283,36 @@ section.playground-btn {
     display: flex;
     justify-content: center;
   }
+.open-playground-btn {
+  position: relative;
+  font-size: 1.4rem;
+  height: 3.5rem;
+  padding: 1.5rem;
+}
+.open-playground-btn::after {
+  content: '';
+  border-radius: 100%;
+  border: 0.275rem solid rgb(0,170,159);
+  position: absolute;
+  z-index: -1;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  animation: ring 2.5s infinite;
+}
+
+@keyframes ring {
+  0% {
+    width: 30px;
+    height: 30px;
+    opacity: 1;
+  }
+  100% {
+    width: 300px;
+    height: 300px;
+    opacity: 0;
+  }
+}
 
 }