Merge pull request bradtraversy#71 from khatri2002/animated-countdown…

…-style Added CSS style to button
heryRandria · Jul 31, 2021 · 9f05b92 · 9f05b92
2 parents f1d4761 + 3011f42
commit 9f05b92
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 1 deletion.
diff --git a/animated-countdown/index.html b/animated-countdown/index.html
@@ -19,7 +19,9 @@ <h4>Get Ready</h4>
 
     <div class="final">
       <h1>GO</h1>
-      <button id="replay">Replay</button>
+      <button id="replay">
+        <span>Replay</span>
+      </button>
     </div>
     <script src="script.js"></script>
   </body>

diff --git a/animated-countdown/style.css b/animated-countdown/style.css
@@ -124,3 +124,40 @@ h4 {
     transform: translate(-50%, -50%) rotate(-120deg);
   }
 }
+
+#replay{
+  background-color: #3498db;
+  border-radius: 3px;
+  border: none;
+  color: aliceblue;
+  padding: 5px;
+  text-align: center;
+  display: inline-block;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+#replay span{
+  cursor: pointer;
+  display: inline-block;
+  position: relative;
+  transition: 0.3s;
+}
+
+#replay span:after{
+  content: '\00bb';
+  position: absolute;
+  opacity: 0;
+  top: 0;
+  right: -20px;
+  transition: 0.5s;
+}
+
+#replay:hover span{
+  padding-right: 25px;
+}
+
+#replay:hover span:after{
+  opacity: 1;
+  right: 0;
+}