body {
    font-family: 'Roboto Condensed', sans-serif;
    height: 100%;
    background-color: black;
    color: #fff;
    text-transform: uppercase;
}
.container {
    text-align: center;
}
h1 {
    margin-left: 30px;
    margin-bottom: 50px;
}
.button {
    width: 43%;
    padding-top: 30px;
    padding-bottom: 30px;
    text-align: center;
    color: #000;
    text-transform: uppercase;
    font-weight: 600;
    margin-left: 30px;
    margin-bottom: 30px;
    cursor: pointer;
    display: inline-block;
}

.button-1 {
    background-color: transparent;
    border: 3px solid #00d7c3;
    border-radius: 50px;
    -webkit-transition: all .15s ease-in-out;
    transition: all .15s ease-in-out;
    color: #00d7c3;
}
.button-1:hover {
    box-shadow: 0 0 10px 0 #00d7c3 inset, 0 0 20px 2px #00d7c3;
    border: 3px solid #00d7c3;
}

.button-2 {
    color: #fff;
    border: 3px solid #c266d3;
    background-image: -webkit-linear-gradient(30deg, #c266d3 50%, transparent 50%);
    background-image: linear-gradient(30deg, #c266d3 50%, transparent 50%);
    background-size: 500px;
    background-repeat: no-repeat;
    background-position: 0%;
    -webkit-transition: background 300ms ease-in-out;
    transition: background 300ms ease-in-out;
}
.button-2:hover {
    background-position: 100%;
    color: #c266d3;
}

.button-3 {
    border: 2px solid #ffffff;
    background-color: #129183;
    border-radius: 20px;
    color: #fff;
    transition: .3s;
}
.button-3:hover {
    box-shadow: 8px 8px #99bdff;
    transition: .3s;
}

.button-4 {
    background-color: transparent;
    border: 3px solid #ff0251;
    color: #ff0251;
    transition: .3s;
}
.button-4:hover {
    animation: pulse 1s infinite;
    transition: .3s;
}
@keyframes pulse {
    0% {
        transform: scale(1);
    }
    70% {
        transform: scale(.9);
    }
    100% {
        transform: scale(1);
    }
}

.button-5 {
    width: 200px;
    border-radius: 5px;
    background-color: #F4F200;
    background-image: #F4F200;
    background-image: -moz-linear-gradient(top, #fff 0%, #F4F200 100%); 
    background-image: -webkit-linear-gradient(top, #fff 0%,#F4F200 100%); 
    background-image: linear-gradient(to bottom, #fff 0%,#F4F200 100%); 
    background-size: 300px;
    background-repeat: no-repeat;
    background-position: 0%;
    -webkit-transition: background 300ms ease-in-out;
    transition: background 300ms ease-in-out;
}
.button-5:hover {
    background-position: -200%;
    transition: background 300ms ease-in-out;
}