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.
<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> |
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); | |
} | |
} |
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.