JSFiddle - React, Tailwind, and code Playground

by J. Albert Bowden

HTML

<time class="starburst4"><a href="#" ><span><span><span><span><br />NEW<br />CSS3<br />Starbursts!</span></span></span></span></a></time>

CSS

.starburst4{margin:20px 0; padding:0; overflow:hidden; width:10em; height:10em; position:relative; margin:0; padding:0; line-height:1.2em;}
.starburst4 a{margin:0; padding:0; line-height:1.2em;
display:block; width:6em; height:6em; -webkit-transform:rotate(-67.5deg); -moz-transform:rotate(-67.5deg); rotation:-67.5deg; position:relative; top:2em; left:2em; text-align:center; text-decoration:none; color:#000; font-weight:bold; font-family:Arial, sans-serif; text-shadow:-1px -1px -1px #fff, 1px 1px 1px #00f}
.starburst4 a span{display:block; width:6em; height:6em; background:#78d7ff; -webkit-transform:rotate(22.5deg); -moz-transform:rotate(22.5deg); rotation:22.5deg; -moz-border-radius:2.5em; -webkit-border-radius:2.5em; border-radius:2.5em; -moz-transition: -moz-border-radius 0.2s ease-in; -webkit-transition: -webkit-border-radius 0.2s ease-in; transition: border-radius 0.2s ease-in}
.starburst4:hover{background:transparent}
.starburst4:hover span{background:#08f; color:#fff; text-shadow:0 0 20px #fff, 0 0 8px #fff; -moz-border-radius:0; -webkit-border-radius:0; border-radius:0}