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. They may not work on all Hubs, or may cause unexpected behavior. Before implementing a Hub Hack on a production Hub, we strongly recommending testing it in a safe environment (such as a staging Hub) if possible.

Uberflip Support is not able to help troubleshoot issues with Hub Hacks: if a Hub Hack is not working correctly in your Hub, Uberflip Support can only help you to disable it.

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.