Hub Hack: Replace Links on Item Tiles With Buttons


Use this Custom Code snippet to replace the standard 'Read Article', 'Read Flipbook' and 'View Presentation' links on each Item Tile in a Stream with a blue button.


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.


  • Type: CSS
  • Placement: Head
  • Note: Also includes a white gradient background behind the button. Both the button and the gradient can be changed to any color you prefer.





/*-- Tile Buttons --*/ div.tile.single>a.view, li.tile.single>a.view { background-image: none; margin: 0 20px; padding: 11px 10px; font-size: 13px; font-weight: bold; width: auto; border-radius: 0; height: auto; line-height: 1; bottom: 20px; white-space: nowrap; color: #fff; border-color: #0093D0; background: #0093D0!Important; border-width: 1px; border-style: solid; box-shadow: none; -webkit-transition: 0.2s all; transition: 0.2s all; -webkit-font-smoothing: antialiased; -webkit-transform: translateZ(0); transform: translateZ(0); } .tile.single:hover>a.view { background: #fff!Important; color: #0093D0!important; text-decoration: none; } .tile.single>a.view:before { display: none; } .tile.single>a.view:after { display: inline; content: ''; position: relative; top: -1px; left: 3px; right: auto; bottom: auto; background: none; } .tile .description { border-top: 1px solid #ddd; } /*--Description Gradient--*/ .tile.single>.description:after { content: ''; margin-left: -20px; background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, white 25%); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, white 25%); height: 8rem; bottom: 0; display: block; position: absolute; left: 0; right: 0; }


0 out of 0 found this helpful



Please sign in to leave a comment.