Creating Spinning Logo for WordPress Genesis and Others

Creating Spinning Logo for WordPress Genesis and Other Themes is quite easy. Move the mouse over the logo and it will spin. You can control the speed,behavior. No head spinning effect really. Its quite easy to create the effect and control the animation behavior programatically. We have named the article as creating spinning logo for WordPress Genesis, but actually it will work any HTML5 or even older HTML webpages or CMS where you can control the CSS, source code etcetera.


Creating Spinning Logo for WordPress Genesis  : Introduction


We will be using a specific excellent repository named -prefix-free. Its amazing because it is only of 2 KB size. Well, want to see a demo ? Copy paste this url on a new browser tab :



Move your mouse over the round green button saying “only 2 KB zip”. Browser support is IE9+, Opera 10+, Firefox 3.5+, Safari 4+ and Chrome on desktop and Mobile Safari, Android browser, Chrome and Opera Mobile on mobile.

For Genesis Part, there is nothing but adding some extra CSS in the Child Theme’s style.css file. There are complicated WordPress Themes with multiple CSS files, honestly its difficult to say what to edit for them.

Second part is adding the minified javascript. Which you basically can add through Genesis settings page in the footer.


Creating Spinning Logo for WordPress Genesis  : Let’s Go


The original CSS is actually this :

As you can understand, you have to change the div class name, which is download in this example. You can do some test by changing the degree here :

Change the values and mouse over the same looking round download button there. What you are thinking of ? Logo ? That you can either use as background or use our Guide to Image in CSS to Base64 Data URI Encoding – image format free.

Creating Spinning Logo for WordPress Genesis and Others


Creating Spinning Logo for WordPress Genesis  : Per Post


But you might have a wish to add the effect within a post or page only. That you can do if you follow our old guide – Use Any Web Font Within WordPress Posts With Inline CSS. js can be added in the same way. Indeed, we have shown that before too. Only another part is adding the specific div class.

Try it and leave a feedback !

Tagged With HTML5 Spinning Logo , spin for wordpress , wordpress genesis logo

Follow the Author of this article :

Here’s what we’ve got for you which might like :

Additionally, performing a search on this website can help you. Also, we have YouTube Videos.

Take The Conversation Further ...

We'd love to know your thoughts on this article.
Meet the Author over on Google+ or Twitter to join the conversation right now!

If you want to Advertise on our Article or want Business Partnership, you are invited to Contact us.

Contact Us