btn with not(:active):hover shadow

.btn { display: inline-block; height: 50px; line-height: 50px; padding: 0 2em; border: 2px solid #000; text-transform: uppercase; text-decoration: none; box-shadow: 0 2px 5px 0 rgba(0,0,0,0.2), 0 10px 20px 0 rgba(0,0,0,0.5); transition: box-shadow 0.3s; } .btn:not(:active):hover { transform: translateY(-2px); box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2), 0 20px 30px 0 rgba(0,0,0,0.5); }