circular div

by kayenglajom

HTML

<div class="shapes">
  <div class="circle">
    <h1>PIZZA!</h1>
  </div>
  <div class="square">
    <h1>PIZZA!</h1>
   </div>
</div>

















































































<script>
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-23915674-6']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
    
  setTimeout( function() 
  { 
    
    document.body.insertAdjacentHTML( 
        'afterBegin', 
        '<a href="http://thinkingstiff.com" '
        + 'target="_top" '
        + 'onmouseover="this.style.opacity=\'.95\'" '
        + 'onmouseout="this.style.opacity=\'1\'" '
        + 'style="'
            + 'background-color: black;'
            + 'background-image: linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255, 255, 255, 0) );'
            + 'background-image: -webkit-linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255, 255, 255, 0) );'
            + 'background-image: -moz-linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255, 255, 255, 0) );'
            + 'background-image: -o-linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255, 255, 255, 0) );'
            + 'background-image: -ms-linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255, 255, 255, 0) );'
            + 'border: 1px solid black;'
            + 'border-radius: 2px;'
            + 'bottom: 0;'
            + 'color: white;'
            + 'display: block;'
            + 'font-family: Helvetica, Verdana, Tahoma;'
            + 'opacity: 1;'
            + 'padding: 4px 8px;'
            + 'position: absolute;'
            + 'right: 0;'
            + 'text-decoration: none;'
            + 'text-shadow: -1px -1px black;'
    ...

CSS

@-moz-keyframes spin {
	100% {
		-moz-transform: rotate(360deg);
	}
}
@-webkit-keyframes spin {
	100% {
		-webkit-transform: rotate(360deg);
	}
}
@keyframes spin {
	100% {
		-webkit-transform: rotate(360deg);
		transform:rotate(360deg);
	}
}

.square{
	display: none;
}

.shapes{
	width: 400px;
	height: 400px;
}

.circle {
    background: #ff8f6c;
    border-radius: 200px;
    color: white;
    font-weight: bold;
    display: table;
    margin: 20px auto;
    text-align:center;
    border: 8px solid #000000;
}

h1 {
    vertical-align: middle;
    display: table-cell;
    font-size: 90px;
}

.circle:hover{
	background: #9de7d7;
}

shapes:hover h1{
	-webkit-transform-origin: center center;
	-webkit-transform: rotate(-360deg);
	animation: spin .8s linear;
}

@media only screen and (max-width: 800px) {

	.circle {
		display: none;
	}

	.square {
		width: 380px;
		height: 380px;
		display: inline-block;
		background: #ff8f6c;
		border: 8px solid #000000;
		border-radius: 15px;
	}

	.square:hover{
		background: #9de7d7;
	}
}