callback btn v1

Pyctam-AC · Oct 18, 2023 · f791025 · f791025
1 parent 8b8b486
commit f791025
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 1 deletion.
diff --git a/src/components/ContactUsSmall/ContactUsSmall.jsx b/src/components/ContactUsSmall/ContactUsSmall.jsx
@@ -60,7 +60,7 @@ export const ContactUsSmall = () => {
       />
 
       <button type="submit" className="contact-us-small__submit-btn">
-        Перезвонить
+        <div className="animation"><span className="text">Перезвонить</span><div className="iqon" /></div>
       </button>
     </form>
   );

diff --git a/src/components/ContactUsSmall/ContactUsSmall.scss b/src/components/ContactUsSmall/ContactUsSmall.scss
@@ -43,8 +43,46 @@
     cursor: pointer;
     transition: 1s;
     color: #070707;
+    position: relative;
+    overflow: hidden;
     &:hover {
       opacity: 0.7;
     }
   }
 }
+
+.text {
+  background-color: #ffff;
+  width: 168px;
+  height: 40px;
+  display: flex;
+ justify-content: center;
+ align-items: center;
+  position: absolute;
+ top: 0;
+ left: 0;
+}
+.iqon {
+  width: 168px;
+  height: 40px;
+  background-color: #F5F4EF;
+  position: absolute;
+  top: 40px;
+  left: 0;
+  background-image: url(./iqons/smartphone_FILL0_wght400_GRAD0_opsz24.svg);
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+  padding-top: 3px;
+  padding-bottom: 3px;
+}
+.animation {
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+
+.animation:hover {
+  top: -40px;
+  transition: top 0.1s ease-in-out 0.1s;
+}
diff --git a/src/components/ContactUsSmall/iqons/smartphone_FILL0_wght400_GRAD0_opsz24.svg b/src/components/ContactUsSmall/iqons/smartphone_FILL0_wght400_GRAD0_opsz24.svg