Label Stream Tiles with Buttons

October 7, 2016 Uberflip Customer Success

This code places a blue button on each Tile with labels, such as 'Read Article', 'Read Flipbook' and 'View Presentation'.

/*-- 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;
}
Previous Article
Another "Back to Top" Option
Another "Back to Top" Option

Next Article
Force Descriptions for Flipbook Items to be the Same Height
Force Descriptions for Flipbook Items to be the Same Height