<button class="button">
<div class="button__content">
<div class="button__icon">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="80px" height="80px" viewBox="0 0 80 80" style="enable-background:new 0 0 80 80;" xml:space="preserve">
<g>
<path d="M64,48L64,48h-8V32h8c8.836,0,16-7.164,16-16S72.836,0,64,0c-8.837,0-16,7.164-16,16v8H32v-8c0-8.836-7.164-16-16-16
S0,7.164,0,16s7.164,16,16,16h8v16h-8l0,0l0,0C7.164,48,0,55.164,0,64s7.164,16,16,16c8.837,0,16-7.164,16-16l0,0v-8h16v7.98
c0,0.008-0.001,0.014-0.001,0.02c0,8.836,7.164,16,16,16s16-7.164,16-16S72.836,48.002,64,48z M64,8c4.418,0,8,3.582,8,8
s-3.582,8-8,8h-8v-8C56,11.582,59.582,8,64,8z M8,16c0-4.418,3.582-8,8-8s8,3.582,8,8v8h-8C11.582,24,8,20.417,8,16z M16,72
c-4.418,0-8-3.582-8-8s3.582-8,8-8l0,0h8v8C24,68.418,20.418,72,16,72z M32,48V32h16v16H32z M64,72c-4.418,0-8-3.582-8-8l0,0v-8
h7.999c4.418,0,8,3.582,8,8S68.418,72,64,72z"/>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
</div>
<p class="button__text">command</p>
</div>
</button>
<p class="credits">
Thanks <a href="https://twitter.com/pwign" class="credits__reference">Anh</a> for the inspiration
</p>@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
*{
box-sizing:border-box;
-webkit-tap-highlight-color: transparent
}
html,body{
height:100%;
touch-action: manipulation;
}
body{
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
font-family:"Roboto", sans-serif;
background-color: #f4f5f6;
font-size:14px;
color:#666666;
}
.button{
position:relative;
padding:0;
width:200px;
height:200px;
border:4px solid #888888;
outline:none;
background-color:#f4f5f6;
border-radius: 40px;
box-shadow: -6px -20px 35px #ffffff, -6px -10px 15px #ffffff, -20px 0px 30px #ffffff, 6px 20px 25px rgba(0,0,0,0.2);
transition: .13s ease-in-out;
cursor:pointer;
&:active{
box-shadow:none;
.button__content{
box-shadow: none;
.button__text, .button__icon{
transform:translate3d(0px, 0px, 0px);
}
}
}
&__content{
position:relative;
display:grid;
padding:20px;
width:100%;
height:100%;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows:1fr 1fr;
box-shadow:inset 0px -8px 0px #dddddd, 0px -8px 0px #f4f5f6;
border-radius: 40px;
transition: .13s ease-in-out;
z-index:1;
}
&__icon{
position:relative;
display:flex;
transform:translate3d(0px, -4px, 0px);
grid-column:4;
align-self:start;
justify-self:end;
width:32px;
height:32px;
transition: .13s ease-in-out;
svg{
width:32px;
height:32px;
fill:#aaaaaa;
}
}
&__text{
position:relative;
transform:translate3d(0px, -4px, 0px);
margin:0;
align-self:end;
grid-column:1/5;
grid-row:2;
text-align:center;
font-size: 32px;
background-color: #888888;
color: transparent;
text-shadow: 2px 2px 3px rgba(255,255,255,0.5);
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
transition: .13s ease-in-out;
}
}
.credits{
margin-top:24px;
&__reference{
display:inline-block;
border-bottom: 1px solid transparent;
color:#0099ff;
text-decoration:none;
transition: ease-in .13s;
&:hover{
border-bottom-color: #0099ff;
}
}
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.