From 2231e9ac9c199c5fa3fb7b403208b8f389e4bfde Mon Sep 17 00:00:00 2001 From: Waleed Ahmad Date: Tue, 5 Oct 2021 23:44:16 +0500 Subject: [PATCH] New animated button --- index.html | 59 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ style.css | 49 ++++++++++++++++++++++++++++++++++++++++++++- 2 files changed, 107 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 2d896c6..2f2f6b7 100644 --- a/index.html +++ b/index.html @@ -126,6 +126,65 @@
+ +
+

4. Animated Button

+
+
+ Button +
+
+

Code:

+
+ 
+          
+            .animbtn {
+              box-sizing: border-box;
+              position: relative;
+              padding: 15px 30px;
+              border: 2px solid #111;
+              text-transform: uppercase;
+              text-decoration: none;
+              color: #111;
+              font-weight: 600;
+              font-size: 20px;
+            }
+            .animbtn:before {
+              content: '';
+              position: absolute;
+              top: 6px;
+              left: -2px;
+              width: calc(100% + 4px);
+              height: calc(100% - 12px);
+              background: #fff;
+              transition: 0.5s ease-in-out;
+              transform: scaleY(1);
+              transition-delay: 0.5s;
+            }
+            .animbtn:hover:before {
+              transform: scaleY(0);
+            }
+            .animbtn:after {
+              content: '';
+              position: absolute;
+              left: 6px;
+              top: -2px;
+              height: calc(100% + 4px);
+              width: calc(100% - 12px);
+              background: #fff;
+              transition: 0.5s ease-in-out;
+              transform: scaleX(1);
+            }
+            .animbtn:hover:after {
+              transform: scaleX(0);
+            }
+            .animbtn span {
+              position: relative;
+              z-index: 3;  
+            }
+          
+
+

That's it! I will add more buttons to this page in the future. Thanks for checking these buttons out! Note that you are free to use these buttons on your website/webpage without crediting me, or asking for permission. diff --git a/style.css b/style.css index cb9a9e7..308cdfa 100644 --- a/style.css +++ b/style.css @@ -275,4 +275,51 @@ pre { color: #000; opacity: 0; animation-fill-mode: forwards; -} \ No newline at end of file +} + +/* Animated Button */ +.animbtn { + box-sizing: border-box; + position: relative; + padding: 15px 30px; + border: 2px solid #111; + text-transform: uppercase; + text-decoration: none; + color: #111; + font-weight: 600; + font-size: 20px; +} +.animbtn:before { + content: ''; + position: absolute; + top: 6px; + left: -2px; + width: calc(100% + 4px); + height: calc(100% - 12px); + background: #fff; + transition: 0.5s ease-in-out; + transform: scaleY(1); + transition-delay: 0.5s; +} +.animbtn:hover:before { + transform: scaleY(0); +} +.animbtn:after { + content: ''; + position: absolute; + left: 6px; + top: -2px; + height: calc(100% + 4px); + width: calc(100% - 12px); + background: #fff; + transition: 0.5s ease-in-out; + transform: scaleX(1); +} +.animbtn:hover:after { + transform: scaleX(0); +} +.animbtn span { + position: relative; + z-index: 3; +} +/* End Animated Button */