<div class="player"><span>Play</span></div>
body {
  background: #000
}

.player {
  background: none;
  width: 50px;
  height: 50px;
  border: solid 5px #fff;
  border-radius: 100%;
  position: relative; 
  text-indent:-9999px;
  box-shadow: 1px 1px 3px #999999;
}

.player span {
  width: 0;
  height: 0;
  border-top: 15px solid transparent;
  border-left: 20px solid #fff;
  border-bottom: 15px solid transparent;
  position:absolute;
  top:20%;
  left:36%;    
}

.player:hover{
  background:#4ccaea;
  cursor:pointer;
  opacity:0.8;
  border:none;
  position:absolute;  
  width: 60px;
  height: 60px; 
  box-shadow:none;
}

.player:hover span{
  top:25%;
  left:38%;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.