JSFiddle - React, Tailwind, and code Playground

by Kocsten

HTML

<ul class="zornet_ru_bilkan">
	<li>
		<a href="http://zornet.ru" class="brusam_kervunela"><span><br>ZORNET.RU<br>CSS<br>uCoz-сайт</span></a>
	</li>
	</ul>

CSS

ul.zornet_ru_bilkan {
	list-style:none;
	margin:19px 0;
	padding:0;
	overflow:hidden;
}
ul.zornet_ru_bilkan li {
	float:left;
	width:9em;
	height:9em;
	position:relative;
}
ul.zornet_ru_bilkan * {
	margin:0;
	padding:0;
	line-height:1.3em;
}

/* Starburst 1 */
.brusam_kervunela {
	display:block;
	width:6em;
	height:6em;
	background:#2b579a;
	-webkit-transform:rotate(-22.5deg);
	-moz-transform:rotate(-22.5deg);
	rotation:-22.5deg;
	position:absolute;
	top:2em;
	left:2em;
	text-align:center;
	text-decoration:none;
	color:#f9f0f0;
	font-weight:bold;
	font-family:Arial, sans-serif;
	text-shadow: 0 0 3em #176f2a, 0 0 4px #171616;
	-moz-transition: -moz-transform 0.3s ease;
	-webkit-transition: -webkit-transform 0.3s ease;
	-o-transition: -o-transform 0.3s ease;
	transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.1, 0.8);
}
.brusam_kervunela span {
	display:block;
	width:6em;
	height:6em;
	background:#2b579a;
	-webkit-transform:rotate(45deg);
	-moz-transform:rotate(45deg);
	rotation:45deg;
}
.brusam_kervunela:hover,
.brusam_kervunela:hover span {
	background:#176f2a;
	color:#fbf7f7;
	text-shadow:0 0 20px #797373, 0 0 8px #524f4f;
}
.brusam_kervunela:hover {
	-webkit-transform:rotate(-45deg);
	-moz-transform:rotate(-45deg);
	rotation:-405deg;
}