HTML
CSS
JS
Run
<button class="btn-shadow">HOVER ME!</button>
@import url(https://fonts.googleapis.com/css?family=Open+Sans); body{ text-align: center; min-height: 270px; border: 1px solid #efefef; display: flex; align-items: center; justify-content: center; font-family: "Open Sans"; } .btn-shadow { background: #fff; border: 2px solid #970374; line-height: 1; padding: 15px 35px; min-width: 200px; cursor: pointer; border-radius: 100px; font-size: 16px; } .btn-shadow { color: #970374; transition: 0.5s; } .btn-shadow:hover, .btn-shadow:focus { animation: btn-shadow 1s; box-shadow: 0 0 0 30px rgb(151, 3, 116, 0); } @keyframes btn-shadow { 0% { box-shadow: 0 0 0 0 #970374; } }
<script>N/A</script>
Press Ctrl+Space Key for Auto complete and Intelli Sense
