button
{
    outline: none;
}
button.outline
{
    
position: relative;
        z-index: 3;
        background: transparent;
        color: #1172c4;
        font-size: 14px;
        border-color: #1172c4;
        border-style: solid;
        border-width: 2px;
        border-radius: 22px;
        padding: 10px 40px;
       
        transition: all 0.2s linear;
        a {
            text-decoration: none;
        }
}

.outline:hover {
        color: white;
        background: #1172c4;
        border-color: white;
        transition: all 0.2s linear;
    }

.outline:active {
        border-radius: 122px;
    }

white-blue {
        font-weight: 700;
        color: #00aeef;
        border-color: white;
        background: white;
    }
.white-blue:hover {
        color: white;
        background: #00aeef;
        border-color: white;
    }
.white-green {
        font-weight: 700;
        color: #7dc21e;
        border-color: white;
        background: white;
    }
.white-green:hover {
        color: white;
        background: #7dc21e;
        border-color: white;
    }
.green-white {
        font-weight: 700;
        color: #7dc21e;
        border-color: #7dc21e;
        background: transparent;
    }
.green-white:hover {
        color: white;
        background: #7dc21e;
        border-color: #7dc21e;
    }
.purple-white {
        font-weight: 700;
        color: #664e96;
        border-color: #664e96;
        background: transparent;
    }
.purple-white:hover {
        color: white;
        background: #664e96;
        border-color: #664e96;
    }
.white-purple {
        font-weight: 700;
        color: #664e96;
        border-color: white;
        background: white;
    }
.white-purple:hover {
        color: white;
        background: #664e96;
        border-color: white;
    }