Hover Button Effect

HTML
<button>Button</button> <button class="outline">Button</button>
CSS
html, body { height: 100%; width: 100%; display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; background-color: #444444; } /* Normal Button */ button { display: inline-block; margin: 0.75rem; padding: 0.75rem 1.5rem; border: none; border-radius: 0.1875rem; outline: none; background-color: #ea4c89; color: white; font-family: inherit; font-size: 1.125em; font-weight: 300; line-height: 1.5rem; text-decoration: none; text-transform: uppercase; cursor: pointer; transition: all 150ms ease-out; width: 300px; letter-spacing: 4px; } button:focus, button:hover { background-color: #ea4c89; box-shadow: 0 0 0 0.1875rem white, 0 0 0 0.375rem #ea4c89; } button:active { background-color: #ea4c89; box-shadow: 0 0 0 0.1875rem #ea4c89, 0 0 0 0.375rem #ea4c89; transition-duration: 75ms; } /* Outline Button */ button.outline { border: 0.1875rem solid #ea4c89; background-color: transparent; color: #ea4c89; } button.outline:focus, button.outline:hover { border-color: #ea4c89; color: #ea4c89; } button.outline:active { border-color: #ea4c89; color: #ea4c89; }
JAVASCRIPT
Expand for more options Login