The article presents a CSS code snippet designed to apply a shake effect to a phone icon element on a website. It includes styles for the body and icon, ensuring the button looks visually appealing and interactive. The shake effect is achieved through animations, enhancing user engagement by making the icon more noticeable. The hover effects additionally provide visual feedback to users when they interact with the icon, making the interface more dynamic and responsive to user input.
body { font-family: Arial, sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f5f5f5; }
.phone-icon { display: inline-flex; align-items: center; padding: 12px 20px; background-color: #28a745; color: white; border-radius: 50px; text-decoration: none; font-size: 18px; font-weight: bold; transition: transform 0.3s ease, box-shadow 0.3s ease; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); }
.phone-icon:hover { background-color: #218838; transform: scale(1.1); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25); }
.phone-icon i { margin-right: 10px; animation: blink 1.2s infinite; }
Collection
[
|
...
]