AOL Portal Buttons

by lshettyl

HTML

<a class="c-portal-button c-portal-button--is-pink" rel="next" href="/page/3/">
    <span>More</span>
    <span class="c-portal-button__arrow-right"></span>
</a>

CSS

/* DOCUMENT INFORMATION
   - Document:		aolbuttons.css / basic theme AOL Portal like buttons
   - Version:		1.2
   - Client:		AOL Inc.
   - Author:		AOL UK Media Team
   - Date Created:	4 Jan 2014  
*/

/*AOL Portal like buttons*/

.c-portal-button {
	position: relative;
	display: inline-block;
	margin: auto;
	padding: 8px 12px;
	min-width: 50px;
	border: 0;
	/*border-radius*/
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	cursor:	pointer;
	color: #FFF;
    text-align: center;
    text-decoration: none;
	font-family: "adelle-sans",sans-serif,arial;
    font-weight: normal;
    -webkit-appearance: none;
	/*transition*/
	transition: all 0.2s ease;
	-o-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
	-webkit-transition: all 0.2s ease;
}
.c-portal-button span:first-child 	{ color: #FFF; font-size: 14px; }
.c-portal-button__arrow-left, 
.c-portal-button__arrow-right 		{ display: inline-block; width: 6px; height: 9px; background-image: url('http://www.blogsmithmedia.com/travel.aol.co.uk/media/trv-arrows-sprite.png'); }

/* webkit hack to alight the button padding with other browsers */
@media screen and (-webkit-min-device-pixel-ratio:0) {

	button.c-portal-button { padding: 10px 12px; }
}
@media 	only screen and (-webkit-min-device-pixel-ratio: 1.5),
		only screen and (min--moz-device-pixel-ratio: 1.5),
		only screen and (min-resolution: 240dpi) {
	
	.c-portal-button__arrow-left, 
	.c-portal-button__arrow-right 	{ background-image: url('http://www.blogsmithmedia.com/travel.aol.co.uk/media/trv-arrows-sprite2x.png'); background-size: 239px; background-repeat: no-repeat; }
}

.c-portal-button__arrow-right 	{ margin-bottom: -1px; margin-left: 6px; background-position: -10px -181px; }
.c-portal-button__arrow-left 	{ margin-right: 6px; background-position: -41px -181px; }
.c-portal-button--is-pink 		{ background-color: #fc057f; }
.c-portal-button--is-pink:hover { background-color: #de0069; color: #fff; text-decoration: none;...