A CodePen by Francisco Campos.

index.html

<div class="sphere"> 
  <h3>Adobe Edge<br><small>Reflow</small>
</div>

style.css

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.sphere {
  margin: 80px 150px;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  border: 20px solid #0E273E;
 background: #6FDBFE;
  -moz-box-shadow: 1px 1px 10px #272829;
  box-shadow: -1px 1px 10px #272829;
  -webkit-transition: -webkit-transform 0.3s ease-in-out;
-moz-transition: -moz-transform 0.3s ease-in-out;
transition: transform 0.3s ease-in-out;
}
.sphere h3 {
  font: 400 24px/1.4 "Century Gothic", Helvetica, sans-serif;
  color: #fff;
  text-align: center;
  padding-top:55px;
  text-shadow: 1px 1px 1px #272829;
}
.sphere small {
 font: 400 32px/0.5 "Century Gothic", Helvetica, sans-serif; 
}

.sphere:hover {
 -webkit-transform: scale(1.5) rotate(-15deg);
-moz-transform: scale(1.5) rotate(-15deg);
-o-transform: scale(1.5) rotate(-15deg);
transform: scale(1.5) rotate(-15deg); 
}

``