Submit your widget

CSS3 rotation starbursts effect

Created 12 years ago   Views 10976   downloads 2658    Author matthewjamestaylor
CSS3 rotation starbursts effect
View DemoDownload
82
Share |

The  starburst will only work in browsers that support the CSS3 rotation property, currently that's Safari, Firefox, and Google Chrome. All other browsers will gracefully degrade to a simple yellow box. I've added a Safari screenshot to the right so you can see what it looks like in a modern browser (just in case you're not using one right now).

Here is the HTML code. Notice that there is only one link and three span tags:

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

The CSS is a little bit longer. I've highlighted the rotation rules in the CSS, one is for Firefox (prefixed with -moz-), one is for webkit (prefixed with -webkit-), and the other is the standard rotation rule as it will be used once this rotation property becomes standard:

.starburst {
	display:block;
	width:6em;
	height:6em;
	background:#fe0;
	-webkit-transform:rotate(-45deg);
	-moz-transform:rotate(-45deg);
	rotation:-45deg;
	position:relative;
	top:2em;
	left:2em;
	text-align:center;
	text-decoration:none;
	color:#000;
	font-weight:bold;
	font-family:Arial, sans-serif;
}
.starburst span {
	display:block;
	width:6em;
	height:6em;
	background:#fe0;
	-webkit-transform:rotate(22.5deg);
	-moz-transform:rotate(22.5deg);
	rotation:22.5deg;
}

The article source:http://matthewjamestaylor.com/blog/css3-starbursts

Tag: buttons