<button> Click ME ! </button>
body {
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background-color: #151b29;
}

button {
    padding: 1em 2em;
    border: 2px solid orange;
    color: orange;
    background: none;
    font-size: 1em;
    transition: border-color 0.3s, transform 0.3s, color 0.3s, box-shadow 0.3s;
}

button:hover {
    border-color: lightgreen;
    color: white;
    box-shadow: 0 0.5em 0.5em -0.4em lightgreen;
    transform: translateY(-5px);
    cursor: pointer;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.