body {
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
}

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

#btn {
    cursor: pointer;
    padding: 10px 15px;
    border-radius: 20px;
    outline: none;
    border: none;
    color: white;
    font-weight: bold;
    background-image: linear-gradient(to right, #1040be, #077bc9);
    box-shadow: 0px 2px 12px 2px #1040be;
    transition: box-shadow.3s ease-in-out;
    border-radius: 10px;
}

#btn::after {
    opacity: 0;
    background-image: linear-gradient(to right,#077bc9,#1040be);
    transition: opacity.5s ease-in-out;
}

#btn:hover {
    box-shadow: 0px 2px 12px 2px #077bc9;
}

#btn:hover::after {
    opacity: 1;
}