Hub Hack: Add a Pulse Effect to All CTAs

Follow

Use this Custom Code snippet to add a subtle "pulsing" animation around all CTAs in a Hub to draw attention to them.


Warning

Hub Hacks are not official Uberflip features.

Hub Hacks may not work on all Hubs, or may cause unexpected behavior. If you experience issues with a Hub Hack, available support is limited to helping you disable the Hub Hack only.

Important

Hub Hacks are not compatible with Front End V2 Hubs.

If you are not sure if your Hub uses Front End V2, see this article for help.

Details

  • Type: CSS
  • Placement: Head
  • Notes:
    • This Hub Hack will affect all CTAs (Form and Link) across the entire Hub where it is implemented.
    • By default, the color of the pulse effect is a shade of cyan (RGB 0, 138, 189/ HEX #008abd). To customize the color, change the RGB values in all instances of the rgba() function in the code snippet (do not change the alpha value, if present, which is the last of the four values). For example, changing rgba(0,138,189, 0.4) to rgba(206,0,88, 0.4) would change the pulse color from cyan (#008abd) to rubine red (#ce0058).

 

Example

cta_pulse.gif

 

Code

<style>
li.cta, .block-cta { box-shadow: 0 0 0 rgba(0,138,189, 0.4); animation: pulse 2s infinite; } li.cta:hover, .block-cta:hover { animation: none; } @-webkit-keyframes pulse { 0% { -webkit-box-shadow: 0 0 0 0 rgba(0,138,189, 0.4); } 70% { -webkit-box-shadow: 0 0 0 10px rgba(0,138,189, 0); } 100% { -webkit-box-shadow: 0 0 0 0 rgba(0,138,189, 0); } } @keyframes pulse { 0% { -moz-box-shadow: 0 0 0 0 rgba(0,138,189, 0.4); box-shadow: 0 0 0 0 rgba(0,138,189, 0.4); } 70% { -moz-box-shadow: 0 0 0 10px rgba(0,138,189, 0); box-shadow: 0 0 0 10px rgba(0,138,189, 0); } 100% { -moz-box-shadow: 0 0 0 0 rgba(0,138,189, 0); box-shadow: 0 0 0 0 rgba(0,138,189, 0); }
</style>

 

0 out of 0 found this helpful

Comments

0 comments

Please sign in to leave a comment.