I’m working on a new design for Themes by bavotasan.com and I have been contemplating a few different approaches for some new buttons. This one fell by the wayside but I still think it’s kind of a cool idea. I wanted to use the CSS3 rotate style to have text going straight up. It’s pretty simple to do and looks awesome.
This is the HTML markup:
<div class="rotate-button"> <div class="top">Basic Themes</div> <div class="turned">are</div> <div class="bottom">FREE</div> </div>
The CSS3 rotate style looks like this:
-webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg);
The effects works in Firefox, Safari and Chrome browsers. You can also add a filter to make it work in IE but it probably won’t look exactly how you wanted it to.
The IE filter: