CodePen

HTML

            
              <html>
  <head>
  </head>
  <body>
    <div class="button-outer">
      <div class="bezel"></div>
      <div class="button-inner">
        <div class="label">!</div>
      </div>
    </div>
  </body>
</html
            
          
!

CSS

            
              body{
  background: #666666;
}

.button-outer{
  width: 200px;
  height:200px;
  background: linear-gradient(to bottom, #f0f0f0 0%,#e0e0e0 100%);
  display: block;
  border-radius: 50px;
  position: relative;
  margin: 0 auto;
}

.bezel{
  width:170px;
  height:170px;
  position: absolute;
  left: 14px;
  top: 14px;
  border-radius:100%;
  background: linear-gradient(to bottom, #e0e0e0 0%,#f0f0f0 100%);
}

.button-inner{
  width:140px;
  height:140px;
  position: absolute;
  left: 30px;
  top: 29px;
  border-radius:100%;
  background: linear-gradient(to bottom, #f0f0f0 0%,#e0e0e0 100%);
  box-shadow: 0px 1px 2px rgba(0,0,0,0.4);
  text-align: center;
  transition: all .3s;
  -webkit-transition: all .3s;
}

.button-inner:hover{
  transform: scale(1.03);
  -webkit-transform: scale(1.03);
}

.button-inner:active{
  transform: scale(.99);
  -webkit-transform: scale(.99);
  box-shadow: 0px -1px 2px rgba(0,0,0,0.4);
}

.button-inner:active > .label{
  color: #838383;
}

.label{
  font-size: 80px;
  font-weight: bold;
  position: relative;
  top: 24px;
  color: #888888;
  cursor: pointer;
  transition: all .3s;
  -webkit-transition: all .3s;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................