From 9f806a30aae06bb923b54184ccb21cf567af68d9 Mon Sep 17 00:00:00 2001
From: surya2khan <2222ka54@kgcas.com>
Date: Sat, 18 Mar 2023 07:06:50 +0530
Subject: [PATCH] animated Buttonss

---
 public/Buttons/surya54/index.html |  15 ++++
 public/Buttons/surya54/style.css  | 130 ++++++++++++++++++++++++++++++
 2 files changed, 145 insertions(+)
 create mode 100644 public/Buttons/surya54/index.html
 create mode 100644 public/Buttons/surya54/style.css
diff --git a/public/Buttons/surya54/index.html b/public/Buttons/surya54/index.html
new file mode 100644
index 000000000..ccc60d894
--- /dev/null
+++ b/public/Buttons/surya54/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>button</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <button class="btn">
+        <span class="text-container">
+          <span class="text">Button</span>
+</body>
+</html>
\ No newline at end of file
diff --git a/public/Buttons/surya54/style.css b/public/Buttons/surya54/style.css
new file mode 100644
index 000000000..055ed263f
--- /dev/null
+++ b/public/Buttons/surya54/style.css
@@ -0,0 +1,130 @@
+body {
+    margin: 0;
+    padding: 0;
+    height: 150vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    align-content: center;
+  }
+  
+  .btn,
+  .btn *,
+  .btn :after,
+  .btn :before,
+  .btn:after,
+  .btn:before {
+    border: 0 solid;
+    box-sizing: border-box;
+  }
+  .btn {
+    -webkit-tap-highlight-color: transparent;
+    /* -webkit-appearance: button; */
+    background-color: #050e54;
+    background-image: none;
+    color: #fff;
+    cursor: pointer;
+    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
+      Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
+      Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
+    font-size: 200%;
+    font-weight: 800;
+    line-height: 2.5;
+    margin: 0;
+    /* -webkit-mask-image: -webkit-radial-gradient(#000, #fff); */
+    padding: 0;
+    text-transform: uppercase;
+  }
+  .btn:disabled {
+    cursor: default;
+  }
+  .btn:-moz-focusring {
+    outline: auto;
+  }
+  .btn svg {
+    display: block;
+  }
+  .btn [hidden] {
+    display: none;
+  }
+  .btn {
+    border-radius: 99rem;
+    border-width: 2px;
+    padding: 0.8rem 3rem;
+    z-index: 0;
+  }
+  .btn,
+  .btn .text-container {
+    overflow: hidden;
+    position: relative;
+  }
+  .btn .text-container {
+    display: block;
+    mix-blend-mode: exclusion;
+  }
+  .btn .text {
+    display: block;
+    position: relative;
+  }
+  .btn:hover .text {
+    -webkit-animation: move-up-alternate 0.4s linear;
+    animation: move-up-alternate 0.4s linear;
+  }
+  @-webkit-keyframes move-up-alternate {
+    0% {
+      transform: translateY(0);
+    }
+    50% {
+      transform: translateY(90%);
+    }
+    51% {
+      transform: translateY(-90%);
+    }
+    to {
+      transform: translateY(0);
+    }
+  }
+  @keyframes move-up-alternate {
+    0% {
+      transform: translateY(0);
+    }
+    50% {
+      transform: translateY(90%);
+    }
+    51% {
+      transform: translateY(-90%);
+    }
+    to {
+      transform: translateY(0);
+    }
+  }
+  .btn:after,
+  .btn:before {
+    --skew: 0.2;
+    background: rgb(255 255 255);
+    color: #000;
+    content: "";
+    display: block;
+    height: 102%;
+    left: calc(-50% - 50% * var(--skew));
+    pointer-events: none;
+    position: absolute;
+    top: -104%;
+    transform: skew(calc(150deg * var(--skew))) translateY(var(--progress, 0));
+    transition: transform 0.2s ease;
+    width: 110%;
+  }
+  .btn:after {
+    --progress: 0%;
+    left: calc(50% + 50% * var(--skew));
+    top: 102%;
+    z-index: -1;
+  }
+  .btn:hover:before {
+    --progress: 100%;
+  }
+  .btn:hover:after {
+    --progress: -104%;
+  }
+  
\ No newline at end of file
