JSFiddle - React, Tailwind, and code Playground

buttons (ie8)

by web-nfo.com

HTML

<a href="#" class="ahButton ahButtonSmall"><span>Maken</span></a>
<a href="#" class="ahButton ahButtonSmall ahButtonArrowDown"><span>Maken</span></a>
<a href="#" class="ahButton"><span>Maken</span></a>
<a href="#" class="ahButton ahButtonArrowDown"><span>Maken</span></a>
<a href="#" class="ahButton ahButtonBig"><span>Maken</span></a>
<a href="#" class="ahButton ahButtonBig ahButtonArrowDown"><span>Maken</span></a>
<br />
<br />
<a href="#" class="ahButton ahButtonCta ahButtonSmall"><span>Maken</span></a>
<a href="#" class="ahButton ahButtonCta ahButtonSmall ahButtonArrowDown"><span>Maken</span></a>
<a href="#" class="ahButton ahButtonCta"><span>Maken</span></a>
<a href="#" class="ahButton ahButtonCta ahButtonArrowDown"><span>Maken</span></a>
<a href="#" class="ahButton ahButtonCta ahButtonBig"><span>Maken</span></a>
<a href="#" class="ahButton ahButtonCta ahButtonBig ahButtonArrowDown"><span>Maken</span></a>

CSS

* { font-family: Arial; }

/* AH Buttons (core) */
.ahButton {
	font-weight:bold;
	font-size:14px;
	color:#FFFFFF;
	text-decoration:none;
	padding:11px 16px;
	-moz-box-shadow:    1px 1px 10px 2px #C0C0C0;
	-webkit-box-shadow: 1px 1px 10px 2px #C0C0C0;
	box-shadow:         1px 1px 10px 2px #C0C0C0;
	-moz-border-radius:    6px;
	-webkit-border-radius: 6px;
	-khtml-border-radius:  6px;
	border-radius:         6px;
	-webkit-background-clip: padding-box; 
	-moz-background-clip:    padding; 
	background-clip:         padding-box;
	background-color:#41A5E0;
	background-image:-webkit-gradient(linear, left top, left bottom, from(#52B7EC), to(#1986C7));
	background-image:-webkit-linear-gradient(top, #52B7EC, #1986C7);
	background-image:   -moz-linear-gradient(top, #52B7EC, #1986C7);
	background-image:    -ms-linear-gradient(top, #52B7EC, #1986C7);
	background-image:     -o-linear-gradient(top, #52B7EC, #1986C7);
	background-image:  linear-gradient(to bottom, #52B7EC, #1986C7);
	-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr='#52B7EC', endColorstr='#1986C7')";
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#52B7EC', endColorstr='#1986C7');
	border:1px solid #FFFFFF;
	height:42px;
	line-height:42px;
	position:relative;
}
.ahButton.ahButtonSmall {
	height:31px;
	line-height:31px;
	padding:7px 14px;
	font-size:12px;
}
.ahButton.ahButtonBig {
	height:49px;
	line-height:49px;
	padding:12px 30px;
	font-size:16px;
}
.ahButton.ahButtonCta {
	background-color:#F63AC5;
	background-image:-webkit-gradient(linear, left top, left bottom, from(#FF5CD5), to(#EC0096));
	background-image:-webkit-linear-gradient(top, #FF5CD5, #EC0096);
	background-image:   -moz-linear-gradient(top, #FF5CD5, #EC0096);
	background-image:    -ms-linear-gradient(top, #FF5CD5, #EC0096);
	background-image:     -o-linear-gradient(top, #FF5CD5, #EC0096);
	background-image:  linear-gradient(to bottom, #FF5CD5,...