Untitled

/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/*
    Created on : 2018.02.20., 11:13:33
    Author     : Rendszergazdai
*/
body{
    background-color: rgb(114,131,205);
}


.btn{
    border: none;
    padding: 25px 80px;
    font-weight: bold;
    color: white;
    letter-spacing: 3px;
    cursor: pointer;
    transition: .3s ease;
    position: relative;
    background: none;
}

.btn:after{
    content: '';
    position: absolute;
    z-index: -1;
    transition: .3s;
}

.grp1{
    border: 4px solid white;
}

.btn1:hover{
    color: rgb(14,131,205);
    background-color: white;
}

.btn2:after{
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    background: white;
}

.btn2:hover:after{
    height: 100%;
}

.btn2:hover{
    color: rgb(14,131,205);
}

.btn3:after{
    top: 0;
    left: 0;
    background: white;
    width: 0;
    height: 100%;
}

.btn3:hover:after{
    width: 100%;
}

.btn2:hover, .btn3:hover, btn4:hover{
    color: rgb(14,131,205);
}

.btn4:after{
    top: 0;
    left: 50%;
    background: white;
    width: 0;
    height: 100%;
    transform: translateX(-50%);
    opacity: 0;
}

.btn4:hover:after{
    width: 90%;
    opacity: 1;
}

.btn4:hover, .btn5:hover, .btn6:hover{
    color: rgb(14,131,205);
}

.btn5:after{
    top: 0;
    left: 50%;
    background: white;
    width: 0;
    height: 100%;
    transform: translateX(-50%) skewX(25deg);
    opacity: 0;
}

.btn5{
    overflow: hidden;
}

.btn5:hover:after{
    width: 100%;
    opacity: 1;
}

.btn5:active:after{
    width: 120%;
}

.btn6:after{
    top: 50%;
    left: 0;
    background: white;
    width: 100%;
    height: 0;
    transform: translateY(-50%);
    opacity: 0;
}

.btn6:hover:after{
    height: 80%;
    opacity: 1;
}


<body>
        <button class="btn grp1 btn1">BUTTON</button>
        <button class="btn grp1 btn2">BUTTON</button>
        <button class="btn grp1 btn3">BUTTON</button>
        <button class="btn grp1 btn4">BUTTON</button>
        <button class="btn grp1 btn5">BUTTON</button>
        <button class="btn grp1 btn6">BUTTON</button>
        <div></div>
    </body>