Make a cool video LOGO

by AntonLapshin

HTML

<script src="https://fonts.googleapis.com/css?family=Exo"></script>
<link href="https://fonts.googleapis.com/css?family=Exo" rel="stylesheet">

<div class="logo-container">
  <div class="logo">

    <svg class="svg-play" fill="#000000" height="72" viewBox="0 0 24 24" width="72" xmlns="http://www.w3.org/2000/svg">
        <path class="play" d="M8 5v14l11-7z"/>
        <path d="M0 0h24v24H0z" fill="none"/>
    </svg>

    <svg class="svg-shadow" fill="#000000" height="72" viewBox="0 0 24 24" width="72" xmlns="http://www.w3.org/2000/svg">
        <path class="shadow" d="M8 5v14l11-7z"/>
        <path d="M0 0h24v24H0z" fill="none"/>
    </svg>

  </div>

  <div class="text">
    <span class="text-make">make</span>
    <span class="text-cool">cool</span>
    <span class="text-video">video</span>
  </div>
</div>

CSS

.logo {
    display: inline-block;
    width: 68px;
    background-color: #7fb60b;
    border-radius: 50%;
    height: 68px;
    position: relative;
    box-shadow: 0 1px 1px #484848;
    transition: all ease 3s;    
}

.svg-shadow, .svg-play { position: absolute; transform: rotate(-20deg); }

.svg-shadow { 
    top: -1px;
    left: -4px;
}

.svg-play {
    top: -3px;
    left: 2px;  
}

.shadow {
  fill: white;
}

.play {
  fill: rgba(54, 74, 14, 0.78);
}

.text {
    display: none;
    position: absolute;
    left: 57px;
    top: 0;
    font-family: 'Exo', sans-serif;
}

.text span {
  position: absolute;
}

.text-cool {
    top: 16px;
    left: 3px;
}

.text-video {
  top: 32px;
}

.logo-container {
    padding: 4px 2px 0 4px;
    position: relative;
    display: inline-block;
    width: 100px;
    border-radius: 4px;
    vertical-align: middle;      
    transition: all ease 3s;    
    /* box-shadow: 0 1px 2px #525252; */
    /* background-color: #bfe079; */
}