.box{
        background-color: black;
        position: relative;
        display: inline-block; /* Make the width of box same as image */
    }
    .box .text{
        position: absolute;
        color :white;
        z-index: 999;
        margin: 0 auto;
        left: 0;
        right: 0;
        top: 5%; /* Adjust this value to move the positioned div up and down */

    }
    body {
    font-family: 'Kanit';
    }


    button {
        position: absolute;
        z-index: 999;
        margin: 0 auto;
        left: 0;
        right: 0;
        transform: translate(-50, -50);

    }

    button {
     background: #be1e2d;
     color: #ffff;
     border: 2px solid #e3b63b;
     transition: .6s;
     overflow: hidden;
    }

    button:focus {
     outline: none;
    }

    button:before {
        content: '';
        display: block;
        position: absolute;
        background: rgba(255,255,255,.5);
        width: 60px;
        height: 100%;
        left: 0;
        top: 0;
        opacity: .5;
        filter: blur(30px);
        transform: translateX(-130px) skewX(-15deg);
    }

    button:after {
        content: '';
        display: block;
        position: absolute;
        background: rgba(255,255,255,.2);
        width: 30px;
        height: 100%;
        left: 30px;
        top: 0;
        opacity: 0;
        filter: blur(30px);
        transform: translateX(-100px) scaleX(-15deg);
    }

    button:hover {
       background: #e3b63b;
       cursor: pointer;
    }

    button:hover:before {
     transform: translateX(300px) skewX(-15deg);
     opacity: .6;
     transition: .7s;
    }

    button:hover:after {
     transform: translateX(300px) skewX(-15deg);
     opacity: 1;
     tr