Some SCSS that I'm using for setting up a circle class

gistfile1.txt

$white                   : #FFF;
$off-white               : #F7F7F7;
$light-grey              : #EAEAEA;
$grey                    : #CCCCCC;
$darker-grey             : #828282;
$dark-grey               : #424242;
$off-black               : #222;
$black                   : #000;

$light-blue              : #45C6F0;
$dark-blue               : #0057C2;

.circle {
     background: white;
     border: 4px solid $darker-grey;
     border-radius: 100px;
     color: $darker-grey;
     display: block;
     margin-left: auto;
     margin-right: auto;
     overflow: hidden;
     position: relative;
     text-align: center;

     height: 128px;
     width: 128px;

     @include transition(all .3s ease);

     .icon {
          line-height: 120px;
     }
     &.small {
          border-width: 3px;
          height: 64px;
          width: 64px;
          .icon {
               line-height: 58px;
          }
     }
     &.large {
          height: 192px;
          width: 192px;
          .icon {       
               font-size: 98px;
               line-height: 184px;
          }          
     }
     &:hover {
          background: $light-blue;
          color: $white;
     }
     &.hidden {
          .icon {
               color: $white;
               border-radius: 100px;
               opacity: 0;
               text-shadow: #000;
               text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);

               height: 184px;
               width: 184px;               

               position: absolute;
               top: 0;
               left: 0;
          
               z-index: 999;

               @include transition(all .3s ease);              
          }
          &:hover {
               background: $white;
               .icon {
                    opacity: 1;
               }
          }
     }
}