.button {
    display: block;
    position: relative;
    border: none;
}
.button.one:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background-color: rgba(255,255,255,0.4);
    -webkit-transition: none;
    -moz-transition: none;
    transition: none;
}
.button.one:hover:after {
    width: 100%;
    background-color: rgba(255,255,255,0);

    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}

/* Shine */
.hover14 {
    position: relative;
}
.hover14::before {
    position: absolute;
    top: 0;
    left: -75%;
    z-index: 2;
    display: block;
    content: '';
    width: 50%;
    height: 100%;
    background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
    -webkit-transform: skewX(-25deg);
    transform: skewX(-25deg);
}
.hover14:hover::before {
    -webkit-animation: shine .75s;
    animation: shine .75s;
}
@-webkit-keyframes shine {
    100% {
        left: 125%;
    }
}
@keyframes shine {
    100% {
        left: 125%;
    }
}

/* Two */
.button.two {
    background-repeat: no-repeat;
    background-position: -120px -120px, 0 0;

    background-image: -webkit-linear-gradient(
            top left,
            rgba(255, 255, 255, 0.2) 0%,
            rgba(255, 255, 255, 0.2) 37%,
            rgba(255, 255, 255, 0.8) 45%,
            rgba(255, 255, 255, 0.0) 50%
    );
    background-image: -moz-linear-gradient(
            0 0,
            rgba(255, 255, 255, 0.2) 0%,
            rgba(255, 255, 255, 0.2) 37%,
            rgba(255, 255, 255, 0.8) 45%,
            rgba(255, 255, 255, 0.0) 50%
    );
    background-image: -o-linear-gradient(
            0 0,
            rgba(255, 255, 255, 0.2) 0%,
            rgba(255, 255, 255, 0.2) 37%,
            rgba(255, 255, 255, 0.8) 45%,
            rgba(255, 255, 255, 0.0) 50%
    );
    background-image: linear-gradient(
            0 0,
            rgba(255, 255, 255, 0.2) 0%,
            rgba(255, 255, 255, 0.2) 37%,
            rgba(255, 255, 255, 0.8) 45%,
            rgba(255, 255, 255, 0.0) 50%
    );

    -moz-background-size: 250% 250%, 100% 100%;
    background-size: 250% 250%, 100% 100%;

    -webkit-transition: background-position 0s ease;
    -moz-transition: background-position 0s ease;
    -o-transition: background-position 0s ease;
    transition: background-position 0s ease;
}

.button.two:hover {
    background-position: 0 0, 0 0;

    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    transition-duration: 0.5s;
}



@media all and (max-width: 599px){

    .efect_hover_1 .a {
        width:400px;
        height:266px;
        overflow:hidden;
        background-image:url('../img/dat-1.jpg');

        box-shadow:0 0 10px 1px #ddd;
    }
    .efect_hover_1 .b {
        width:0;
        height:266px;
        overflow:hidden;

        transform:skew(-20deg);
        transition:width 1s ease;
    }
    .efect_hover_1 .a:hover .b {
        width:400px;

    }
    .efect_hover_1 .c {
        width:400px;
        height:266px;
        transform:skew(20deg);

        background-image:url('../img/dat-2.jpg');
        background-position:0 0;
    }
}

@media all and (min-width: 599px){

    .efect_hover_1 .a {
        width:800px;
        height:533px;
        overflow:hidden;
        background-image:url('../img/dat-1.jpg');

        box-shadow:0 0 10px 1px #ddd;
    }
    .efect_hover_1 .b {
        width:0;
        height:533px;
        overflow:hidden;

        transform:skew(-20deg);
        transition:width 1s ease;
    }
    .efect_hover_1 .a:hover .b {
        width:800px;
    }
    .efect_hover_1 .c {
        width:800px;
        height:533px;
        transform:skew(20deg);

        background-image:url('../img/dat-2.jpg');
        background-position:0 0;
    }
}