diff --git a/SwipeButtonHover/index.html b/SwipeButtonHover/index.html
new file mode 100644
index 0000000..59dbdbd
--- /dev/null
+++ b/SwipeButtonHover/index.html
@@ -0,0 +1,15 @@
+
+
+
+
+
+
+ Swipe Button Hover Effects
+
+
+
+ Swipe Next
+
+
+
+
\ No newline at end of file
diff --git a/SwipeButtonHover/style.css b/SwipeButtonHover/style.css
new file mode 100644
index 0000000..5777e5c
--- /dev/null
+++ b/SwipeButtonHover/style.css
@@ -0,0 +1,66 @@
+*{
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+body{
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ min-height: 100vh;
+ background-color: #28272a;
+}
+.btn{
+ position: relative;
+ width: 200px;
+ height: 60px;
+ background: rgba(255, 255, 255, 0.1);
+ border-radius: 60px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ color: rgba(255, 255, 255, 0.5);
+ text-decoration: none;
+ letter-spacing: 2px;
+ border-top: 0.5px solid rgba(255, 255, 255, 0.35);
+ border-left: 0.5px solid rgba(255, 255, 255, 0.35);
+ padding-left: 40px;
+ transition: 0.5s;
+ overflow: hidden;
+}
+.btn:hover{
+ padding-left: 0px;
+ padding-right: 40px;
+ color: rgba(255, 255, 255, 1);
+}
+
+.btn span{
+ position: absolute;
+ left: 5px;
+ width: 50px;
+ height: 50px;
+ background: #04fe4d;
+ border-radius: 50%;
+ transition: 0.5s ease-in-out;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ color: #1a191d;
+ font-size: 1.5em;
+}
+.btn:hover span{
+ left: calc(100% - 55px);
+}
+.btn:after{
+ content: '';
+ position: absolute;
+ width: 80px;
+ height: 100%;
+ z-index: 1;
+ background:rgba(255, 255, 255, 0.25);
+ transform: translateX(-170px) skew(30deg);
+ transition: 0.75s ease-in-out;
+}
+.btn:hover:after{
+ transform: translateX(170px) skew(30deg);
+}
\ No newline at end of file