The Rainbow Wheel - Pure CSS

index.html

<div class="tool-container">
    <div class="outer-cl">
        <div class="rotcl-wrapper">
            <img src="http://i.imgur.com/3nqs47k.png" class="rotating-cl">
        </div>
        <div class="tool-content">
            <img src="http://i.imgur.com/FUPah7I.png">
        </div>
    </div>
</div>

style.css

html, body {
    background: #d6d6d6;
}
.tool-container {
    position: absolute;
    width: 450px;
    height: 450px;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
}
.outer-cl {
    position: absolute;
    z-index: 1;
    /* background */
    background: #5c5c5c;
    background: -moz-linear-gradient(top, #5c5c5c 0%, #171717 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, #5c5c5c), color-stop(100%, #171717));
    background: -webkit-linear-gradient(top, #5c5c5c 0%, #171717 100%);
    background: -o-linear-gradient(top, #5c5c5c 0%, #171717 100%);
    background: -ms-linear-gradient(top, #5c5c5c 0%, #171717 100%);
    background: linear-gradient(to bottom, #5c5c5c 0%, #171717 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5c5c5c', endColorstr='#171717', GradientType=0);
    /* background */
    -webkit-box-shadow: 0px 0px 15px 1px rgba(0, 0, 0, 0.8);
    -moz-box-shadow: 0px 0px 15px 1px rgba(0, 0, 0, 0.8);
    box-shadow: 0px 0px 15px 1px rgba(0, 0, 0, 0.8);
    width: 300px;
    height: 300px;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
}
.outer-cl:hover .rotating-cl {
    cursor: pointer;
    -webkit-animation: rotateSVG 0.4s infinite linear;
    animation: rotateSVG 0.4s infinite linear;
}
.rotcl-wrapper {
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    width: 300px;
    height: 300px;
    margin-right: -50%;
    transform: translate(-50%, -50%);
}
.rotating-cl {
    background: transparent;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    transition-property: transform;
    transition-duration: 1s;
}
.tool-content img {
    position: absolute;
    z-index: 2;
    height: 180px;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
}
/* Chrome, Safari, Opera */
 @-webkit-keyframes rotateSVG {
    100% {
        -webkit-transform: rotateZ(360deg);
    }
}
/* Standard */
 @keyframes rotateSVG {
    100% {
        transform: rotateZ(360deg);
    }
}

The-Rainbow-Wheel---Pure-CSS.markdown

The Rainbow Wheel - Pure CSS

A simple, minimalistic styling for Buttons; made with pure CSS. Completely customizable, add your own settings or change the existing ones. Can be used as a button.

More pens coming soon!

A Pen by Preetesh Jain on CodePen.

License.