<div class="button"></div>

$ticket-button-active-bgcolor-default: #1e2424; // dark blue
$top-of-book-active-box-shadow-color: #68c4bc;
$ticket-button-active-shadow-default: #68c4bc;
$bg-color: #1e2424;

body {
   background-color: #000;
}

.button {
    width: 100px;
    height: 100px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 50%;
    border-top-left-radius: 0;
    border-top-right-radius: 50%;
    display: block;
    background: $ticket-button-active-bgcolor-default;
    border: 1px solid $top-of-book-active-box-shadow-color;
    box-shadow: inset 0 0 1rem $top-of-book-active-box-shadow-color;
  
    &:hover {
    animation: place-order-keyframes .4s linear;
    background-color: $ticket-button-active-bgcolor-default;

    @keyframes place-order-keyframes {
        0% {
            background-color: lighten(saturate($ticket-button-active-bgcolor-default, 90%), 2%);
            box-shadow: 0 0 0 0 rgba($top-of-book-active-box-shadow-color, .8),
                inset 0 0 1rem $ticket-button-active-shadow-default,
                inset 0 0 0 0 rgba($top-of-book-active-box-shadow-color, 1);
        }

        4%, 90% {
            background-color: lighten(saturate($ticket-button-active-bgcolor-default, 90%), 10%);
            box-shadow: 0 0 25px 3px rgba($top-of-book-active-box-shadow-color, .8),
                inset 0 0 0 4px rgba(255, 255, 255, 1),
                inset 0 0 25px 8px lighten(rgba($top-of-book-active-box-shadow-color, 1), 60%);
        }

        100% {
            background-color: $ticket-button-active-bgcolor-default;
            box-shadow: 0 0 0 0 rgba($top-of-book-active-box-shadow-color, .8),
                inset 0 0 1rem $ticket-button-active-shadow-default,
                inset 0 0 0 0 rgba($top-of-book-active-box-shadow-color, 1);
        }
      }
    }
}