Big Red Button

HTML
<a class="button"></a>
SCSS
$button-height: 80px; $button-width: 480px; $press-time: .4s; html, body{ height: 100%; width: 100%; } body{ background-color: #eee; position: relative; margin: 0; } .button{ box-shadow: 0px 15px 0 20px #352d2d, 0px 40px 0 30px #000000; cursor: pointer; background-color: #c0392b; position: absolute; border-radius: 50%; top: 50%; left: 50%; width: $button-width; height: $button-height; transform: translateX(-50%); &::before{ content: ''; z-index: 1; border-radius: 50%; background-color: #e74c3c; position: absolute; bottom: 100%; left: 0%; transition: bottom $press-time; width: $button-width; height: $button-height; } &::after{ content: ''; background-color: #c0392b; position: absolute; bottom: 50%; left: 0%; width: $button-width; height: $button-height; transition: height $press-time; } &:active{ &::before{ bottom: 10%; } &::after{ height: 10%; } } }
JAVASCRIPT
Expand for more options Login