YouTube clickable animated link button

It looks like you're trying to create a clickable YouTube subscription button with animation. The HTML and CSS you have provided will work well for embedding on a webpage. However, be mindful that inline styling and JavaScript may not always be supported in all environments, so ensure that the hosting platform allows this.

The button has a nice pulse animation and a smooth transition effect when hovered over. If you are embedding this on your own site or blog, it should work as expected! Let me know if you need further adjustments or help with this.

Steps to Use:

Replace "https://youtube.com/@sureshmechtech?si=3ugKCjiLQnEAWwiB" with your actual YouTube channel or video link.
Add to Blogger

Go to Layout > Add a Gadget > HTML/JavaScript.
Paste the above code into the content area.
Save and preview your blog to see the new YouTube button.

Code

<!-- Clickable Animated YouTube Button -->
<a href="https://youtube.com/@sureshmechtech?si=3ugKCjiLQnEAWwiB" target="_blank">
  <button style="
      background-color: #FF0000; 
      color: white; 
      padding: 12px 24px; 
      font-size: 18px; 
      border: none; 
      border-radius: 8px; 
      cursor: pointer; 
      transition: all 0.3s ease;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      animation: pulse 1.5s infinite;
  " 
  onmouseover="this.style.backgroundColor='#cc0000'; this.style.transform='scale(1.1)';" 
  onmouseout="this.style.backgroundColor='#FF0000'; this.style.transform='scale(1)';">
    Subscribe on YouTube
  </button>
</a>

<style>
@keyframes pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  }
}
</style>

Button.

This button will now be animated with a pulse effect and a smooth color transition on hover, creating an interactive experience for visitors to click through to your YouTube channel! Let me know if you need further customizations.

The button has a nice pulse animation and a smooth transition effect when hovered over. If you are embedding this on your own site or blog, it should work as expected! Let me know if you need further adjustments or help with this.

Steps to Use:

Post a Comment