Create vibrating phone icon effect

HTML & CSS
1

I have 1 website: I want to convert to shake effect
Code:

<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>shake effect</title>

  <!-- Font Awesome icon -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">

  <style>
    body {
      font-family: Arial, sans-serif;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      background-color: #f5f5f5;
    }

    /* Icon */
    .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);
    }

    /* shake effect icon */
    .phone-icon i {
      margin-right: 10px;
      animation: blink 1.2s infinite;
    }

    @keyframes blink {
      0%, 100% {
        opacity: 1;
      }
      50% {
        opacity: 0.3;
      }
    }
  </style>
</head>
<body>

  <a href="tel:0931941274" class="phone-icon">
    <i class="fas fa-phone-alt"></i> 0931 941 274
  </a>
</body>
</html>

please help me.
thanks and best regards.

2

Please edit your post to display the code a bit better. Put three backticks ( ``` ) on a line on their own before the code block, and another three on a line on their own after the code block. Then it’ll look like this:

Your code here
And the second line
1 Like
3

To add a shake effect, you can create a @keyframes shake animation and apply it to the .phone-icon on hover or continuously—let me know if you want the exact code.

4

If you mean just the phone icon to vibrate then you can do something like this:

@keyframes shake {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  20% {
    transform: translate(-2px, 0) rotate(-2deg);
  }
  40% {
    transform: translate(2px, 0) rotate(2deg);
  }
  60% {
    transform: translate(-2px, 0) rotate(-2deg);
  }
  80% {
    transform: translate(2px, 0) rotate(2deg);
  }
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}

.phone-icon:hover i {
  animation: shake 0.2s infinite;
}

I’ve only applied it on hover of the button and it probably should be in a reduced motion query anyway to avoid disturbing those that don’t like motion