@-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: #fff
    }

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
    }