Animación botón

Author: mouredev

link_bio/.vscode/settings.json

@@ -5,43 +5,46 @@
 from link_bio.styles.styles import Size, Spacing
 
 
-def link_button(title: str,
-                body: str,
-                image: str,
-                url: str,
-                is_external=True,
-                highlight_color=None,
-                animated=False) -> rx.Component:
+def link_button(
+    title: str,
+    body: str,
+    image: str,
+    url: str,
+    is_external=True,
+    highlight_color=None,
+    animated=False,
+) -> rx.Component:
 
-    return rx.button(
-        rx.hstack(
-            rx.image(
-                src=image,
-                width=Size.LARGE.value,
-                height=Size.LARGE.value,
-                margin=Size.MEDIUM.value,
-                alt=title
-            ),
-            rx.vstack(
-                rx.text(
-                    title,
-                    size=Spacing.SMALL.value
+    return rx.container(
+        rx.button(
+            rx.hstack(
+                rx.image(
+                    src=image,
+                    width=Size.LARGE.value,
+                    height=Size.LARGE.value,
+                    margin=Size.MEDIUM.value,
+                    alt=title,
                 ),
-                rx.text(
-                    body,
-                    size=Spacing.VERY_SMALL.value
+                rx.vstack(
+                    rx.text(title, size=Spacing.SMALL.value),
+                    rx.text(body, size=Spacing.VERY_SMALL.value),
+                    align_items="start",
+                    spacing=Spacing.VERY_SMALL.value,
+                    padding_y=Size.SMALL.value,
+                    padding_right=Size.SMALL.value,
                 ),
-                align_items="start",
-                spacing=Spacing.VERY_SMALL.value,
-                padding_y=Size.SMALL.value,
-                padding_right=Size.SMALL.value
+                align="center",
+                width="100%",
+            ),
+            variant="solid",
+            radius="none",
+            width="100%",
+            background_color=(
+                highlight_color if highlight_color is not None else Color.PRIMARY.value
             ),
-            align="center",
-            width="100%"
+            on_click=rx.redirect(path=url, is_external=is_external),
         ),
-        variant="solid",
-        radius="none",
-        background_color=highlight_color if highlight_color is not None else Color.PRIMARY.value,
-        class_name=styles.BOUNCEIN_ANIMATION if animated else None,
-        on_click=rx.redirect(path=url, is_external=is_external)
+        class_name=styles.SHAKE_ANIMATION if animated else None,
+        padding=0,
+        width="100%",
     )

link_bio/link_bio/components/link_button.py

@@ -8,14 +8,14 @@
 # Constants
 MAX_WIDTH = "560px"
 FADEIN_ANIMATION = "animate__animated animate__fadeIn"
-BOUNCEIN_ANIMATION = "animate__animated animate__bounceIn"
+SHAKE_ANIMATION = "animate__animated animate__shakeX"
 
 # Sizes
 
 STYLESHEETS = [
     "https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;800&display=swap",
     "https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css",
-    "/css/styles.css"
+    "/css/styles.css",
 ]
 
 
@@ -40,6 +40,7 @@ class Spacing(Enum):
     MEDIUM_BIG = "7"
     VERY_BIG = "9"
 
+
 # Styles
 
 
@@ -53,7 +54,7 @@ class Spacing(Enum):
     rx.heading: {
         "color": TextColor.LIGHT.value,
         "font_family": Font.DEFAULT.value,
-        "font_weight": FontWeight.MEDIUM.value
+        "font_weight": FontWeight.MEDIUM.value,
     },
     rx.button: {
         "width": "100%",
@@ -65,17 +66,9 @@ class Spacing(Enum):
         "color": Color.DARK.value,
         "border": f"1px solid {Color.LIGHT.value}",
         "box_shadow": f"3px 3px 0px 0px {Color.LIGHT.value}",
-        "_hover": {
-            "box_shadow": "none",
-            "transform": "translate(3px, 3px)"
-        }
+        "_hover": {"box_shadow": "none", "transform": "translate(3px, 3px)"},
     },
-    rx.link: {
-        "color": TextColor.LIGHT.value,
-        "text_decoration": "none",
-        ""
-        "_hover": {}
-    }
+    rx.link: {"color": TextColor.LIGHT.value, "text_decoration": "none", "" "_hover": {}},
 }
 
 title_style = dict(
@@ -90,6 +83,6 @@ class Spacing(Enum):
     "box_shadow": f"3px 3px 0px 0px {Color.LIGHT.value}",
     "_hover": {
         "box_shadow": f"6px 6px 0px 0px {Color.LIGHT.value}",
-        "transform": "translate(-3px, -3px)"
-    }
+        "transform": "translate(-3px, -3px)",
+    },
 }