Minimal Button

HTML
<div class="wrapper"> <a href="#" class="btn">Hover</a> </div>
SCSS
$font: 'Source Sans Pro', sans-serif; $primary: tomato; $secondary: #f1481b; $animation: 0.3s all ease; *, *::before, *::after { box-sizing: border-box; } a { color: #333; text-decoration: none; transition: $animation; &:hover { color: $primary; } &:focus { text-decoration: none; } &:active { color: #FFF; } } body { padding: 0px 20px; margin: 0; font-family: $font; background: #333; -webkit-font-smoothing: antialiased; } .wrapper { min-height: 100vh; display: flex; align-items: center; justify-content: center; } .btn { width: 100px; height: 100px; line-height: 100px; text-align: center; text-transform: uppercase; letter-spacing: 2px; font-weight: bold; position: relative; &:after { transition: $animation; content: ''; position: absolute; left: 0; top: 0; bottom: 0; right: 0; border-radius: 3px; border: 3px solid $primary; } &:before { content:''; position: absolute; border-radius: 3px; left: 0; top: 0; bottom: 0; right: 0; transform: rotate(45deg); background: #fff; z-index: -1; } &:hover { &:after { transform: rotate(45deg); } } &:active { transform: scale(1.1); &:before { background-color: $secondary; } &:after { border-color: $secondary; } } }
JAVASCRIPT
Expand for more options Login