04_Effect

<div class="cont">

<button class="btn"><span>Submit</span><img src="https://i.cloudup.com/2ZAX3hVsBE-3000x3000.png" height="62" width="62"></button>

</div>

<style>

background: #0c0c0c;

@-webkit-keyframes {

}

@-webkit-keyframes extend {

    0% {

        width: 600px;

        height: 200px;

        border-radius: 100px;

        } 10% {

        width: 610px;

        height: 210px;

        background: #fff;

        margin-left: - 5px;

        margin-top: - 5px;

        } 20% {

        width: 600px;

        height: 200px;

        background: #6fb07f;

        margin-left: 0px;

        margin-top: 0px;

        } 100% {

        width: 200px;

        height: 200px;

        border-radius: 100px;

        margin-left: 190px;

        background: #6fb07f;

        }

    }

@keyframes extend {

    0% {

        width: 600px;

        height: 200px;

        border-radius: 100px;

        } 10% {

        width: 610px;

        height: 210px;

        background: #fff;

        margin-left: - 5px;

        margin-top: - 5px;

        } 20% {

        width: 600px;

        height: 200px;

        background: #6fb07f;

        margin-left: 0px;

        margin-top: 0px;

        } 100% {

        width: 200px;

        height: 200px;

        border-radius: 100px;

        margin-left: 190px;

        background: #6fb07f;

        }

    }

@-webkit-keyframes {

}

@-webkit-keyframes disappear {

    0% {

        opacity: 1;

        } 20% {

        color: #fff;

        } 100% {

        opacity: 0;

        }

    }

@keyframes disappear {

    0% {

        opacity: 1;

        } 20% {

        color: #fff;

        } 100% {

        opacity: 0;

        }

    }

@-webkit-keyframes {

}

@-webkit-keyframes appear {

    0% {

        opacity: 0;

        } 70% {

        opacity: 0;

        } 100% {

        opacity: 1;

        }

    }

@keyframes appear {

    0% {

        opacity: 0;

        } 70% {

        opacity: 0;

        } 100% {

        opacity: 1;

        }

    }

html {

    background: #0c0c0c

    }

input, button, submit {

    border: none

    }

.cont {

    position: absolute;

    width: 610px;

    height: 10px;

    left: 50%;

    top: 50%;

    margin: -100px 0 0 -300px

    }

button {

    border-width: 1px;

    width: 600px;

    height: 200px;

    /*border-radius*/

    border-radius: 100px;

    background: #fff;

    position: absolute;

    border: 5px solid #6fb07f

    }

button > span {

    font-size: 48px;

    color: #6fb07f

    }

img {

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    margin: auto;

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";

    filter: alpha(opacity=0);

    opacity: 0

    }

button:focus {

    /*animation*/

    -webkit-animation: extend 1s ease-in-out;

    -ms-animation: extend 1s ease-in-out;

    animation: extend 1s ease-in-out;

    -webkit-animation-fill-mode: forwards;

    /* Chrome, Safari, Opera */

    animation-fill-mode: forwards

    }

button:focus > span {

    /*animation*/

    -webkit-animation: disappear 1s ease-in-out;

    -ms-animation: disappear 1s ease-in-out;

    animation: disappear 1s ease-in-out;

    -webkit-animation-fill-mode: forwards;

    /* Chrome, Safari, Opera */

    animation-fill-mode: forwards

    }

button:focus > img {

    /*animation*/

    -webkit-animation: appear 1s ease-in-out;

    -ms-animation: appear 1s ease-in-out;

    animation: appear 1s ease-in-out;

    -webkit-animation-fill-mode: forwards;

    /* Chrome, Safari, Opera */

    animation-fill-mode: forwards

    }  

</style>