From b7943a5296b4ff8616029acd315f3b5bf5418019 Mon Sep 17 00:00:00 2001
From: Raghvendra Mittal <85191142+codermittal17@users.noreply.github.com>
Date: Mon, 17 Oct 2022 19:04:01 +0530
Subject: [PATCH] Animation4 (#100)
* created animated background effect
* loading animation effect
* soap bubble animation
* animated swipe button
---
SwipeButtonHover/index.html | 15 +++++++++
SwipeButtonHover/style.css | 66 +++++++++++++++++++++++++++++++++++++
2 files changed, 81 insertions(+)
create mode 100644 SwipeButtonHover/index.html
create mode 100644 SwipeButtonHover/style.css
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