/*
 * Reference: https://bootsnipp.com/snippets/featured/outline-square-buttons
 */
.btn-outlined {
    border-radius: 0;
    -webkit-transition: all 0.3s;
       -moz-transition: all 0.3s;
            transition: all 0.3s;
}
.btn-outlined.btn-primary {
    background: #428bca;
    border: 3px solid #428bca;
    color: #FFF;
}
.btn-outlined.btn-primary:hover,
.btn-outlined.btn-primary:activ,
.btn-outlined.btn-primary.active,
.btn-outlined.btn-primary.active {
    color: #428bca;
    background: none;
    border-color: #428bca:
}

.btn-outlined.btn-success {
    background: #47a447;
    border: 3px solid #47a447;
    color: #FFF;
}
.btn-outlined.btn-success:hover,
.btn-outlined.btn-success:active,
.btn-outlined.btn-success.active {
    background: none;
    color: #47a447;
}

.btn-outlined.btn-info {
    background: #39b3d7;
    border: 3px solid #39b3d7;
    color: #FFF;
}
.btn-outlined.btn-info:hover,
.btn-outlined.btn-info:active,
.btn-outlined.btn-info.active {
    color: #39b3d7;
    background: none;
}

.btn-outlined.btn-warning {
    background: #ed9c28;
    border: 3px solid #ed9c28;
    color: #FFF;
}
.btn-outlined.btn-warning:hover,
.btn-outlined.btn-warning:active,
.btn-outlined.btn-warning.active {
    color: #ed9c28;
    background: none;
}

.btn-outlined.btn-danger {
    background: #d2322d;
    border: 3px solid #d2322d;
    color: #FFF;
}
.btn-outlined.btn-danger:hover,
.btn-outlined.btn-danger:active,
.btn-outlined.btn-danger.active {
    color: #d2322d;
    background: none;
}

.btn-outlined.btn-glow {
    background: #2afc2f;
    border: 3px solid #2afc2f;
    color: #000000;
}
.btn-outlined.btn-glow:hover,
.btn-outlined.btn-glow:active,
.btn-outlined.btn-glow.active {
    color: #000000;
    background: none;
}

.btn-outlined.btn-dark {
    background: #000000;
    border: 3px solid #000000;
    color: #FFF;
}
.btn-outlined.btn-dark:hover,
.btn-outlined.btn-dark:active,
.btn-outlined.btn-dark.active {
    color: #000000;
    background: none;
}
.btn-outlined.btn-blue {
    background: blue;
    border: 3px solid blue;
    color: #FFF;
}
.btn-outlined.btn-blue:hover,
.btn-outlined.btn-blue:active,
.btn-outlined.btn-blue.active {
    color: blue;
    background: none;
}
.btn-outlined.btn-pink {
    background: pink;
    border: 3px solid pink;
    color: #FFF;
}
.btn-outlined.btn-pink:hover,
.btn-outlined.btn-pink:active,
.btn-outlined.btn-pink.active {
    color: pink;
    background: none;
}