diff --git a/Components/Buttons/Delete-Effect-Button/index.html b/Components/Buttons/Delete-Effect-Button/index.html
new file mode 100644
index 00000000..c24b42bf
--- /dev/null
+++ b/Components/Buttons/Delete-Effect-Button/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>Delete Effect Button</title>
+</head>
+<body>
+    <button class="button">
+        <svg viewBox="0 0 448 512" class="svgIcon">
+            <path d="M135.2 17.7L128 32H32C14.3 32 0 46.3 0 64S14.3 96 32 96H416c17.7 0 32-14.3 32-32s-14.3-32-32-32H320l-7.2-14.3C307.4 6.8 296.3 0 284.2 0H163.8c-12.1 0-23.2 6.8-28.6 17.7zM416 128H32L53.2 467c1.6 25.3 22.6 45 47.9 45H346.9c25.3 0 46.3-19.7 47.9-45L416 128z"></path>
+        </svg>
+    </button>
+</body>
+</html>
diff --git a/Components/Buttons/Delete-Effect-Button/style.css b/Components/Buttons/Delete-Effect-Button/style.css
new file mode 100644
index 00000000..85cd6709
--- /dev/null
+++ b/Components/Buttons/Delete-Effect-Button/style.css
@@ -0,0 +1,65 @@
+html,
+body {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0;
+    background-color: #f0f0f0;
+}
+
+.button {
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    background-color: rgb(20, 20, 20);
+    border: none;
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.164);
+    cursor: pointer;
+    transition-duration: .3s;
+    overflow: hidden;
+    position: relative;
+}
+
+.svgIcon {
+    width: 12px;
+    transition-duration: .3s;
+}
+
+.svgIcon path {
+    fill: white;
+}
+
+.button:hover {
+    width: 140px;
+    border-radius: 50px;
+    transition-duration: .3s;
+    background-color: rgb(255, 69, 69);
+    align-items: center;
+}
+
+.button:hover .svgIcon {
+    width: 50px;
+    transition-duration: .3s;
+    transform: translateY(60%);
+}
+
+.button::before {
+    position: absolute;
+    top: -20px;
+    content: "Delete";
+    color: white;
+    transition-duration: .3s;
+    font-size: 2px;
+}
+
+.button:hover::before {
+    font-size: 13px;
+    opacity: 1;
+    transform: translateY(30px);
+    transition-duration: .3s;
+}
diff --git a/assets/html_files/buttons.html b/assets/html_files/buttons.html
index a946663c..6eada8dc 100644
--- a/assets/html_files/buttons.html
+++ b/assets/html_files/buttons.html
@@ -174,6 +174,19 @@ <h1>Delete Animation Button</h1>
                     </a>
                 </div>
             </div>
+            <div class="box">
+                <h1>Delete Effect Button</h1>
+                <div class="preview">
+                    <a href="../../Components/Buttons/Delete-Effect-Button/index.html" title="Live Preview" target="_blank">
+                        <img src="../images/link.png">
+                    </a>
+                </div>
+                <div class="source">
+                    <a href="https://github.com/Rakesh9100/Beautiify/tree/main/Components/Buttons/Delete-Effect-Button" title="Source Code" target="_blank">
+                        <img src="../images/github.png">
+                    </a>
+                </div>
+            </div>
             <div class="box">
                 <h1>Flipside Button</h1>
                 <div class="preview">
@@ -631,4 +644,4 @@ <h1>Wiggle Button</h1>
     <script src="../js_files/dark-mode.js"></script>
 </body>
 
-</html>
\ No newline at end of file
+</html>
