Untitled

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Button</title>

    <style>
        @-webkit-keyframes swing {
            20%, 40%, 60%, 80%, 100% { -webkit-transform-origin: top center; }
            20% { -webkit-transform: rotate(15deg); }
            40% { -webkit-transform: rotate(-15deg); }
            60% { -webkit-transform: rotate(5deg); }
            80% { -webkit-transform: rotate(-5deg); }
            100% { -webkit-transform: rotate(0deg); }
        }

        @-moz-keyframes swing {
            20% { -moz-transform: rotate(15deg); }
            40% { -moz-transform: rotate(-10deg); }
            60% { -moz-transform: rotate(5deg); }
            80% { -moz-transform: rotate(-5deg); }
            100% { -moz-transform: rotate(0deg); }
        }

        @-o-keyframes swing {
            20% { -o-transform: rotate(15deg); }
            40% { -o-transform: rotate(-10deg); }
            60% { -o-transform: rotate(5deg); }
            80% { -o-transform: rotate(-5deg); }
            100% { -o-transform: rotate(0deg); }
        }

        @keyframes swing {
            20% { transform: rotate(15deg); }
            40% { transform: rotate(-10deg); }
            60% { transform: rotate(5deg); }
            80% { transform: rotate(-5deg); }
            100% { transform: rotate(0deg); }
        }

        .animated {
            -webkit-transform-origin: top center;
            -moz-transform-origin: top center;
            -o-transform-origin: top center;
            transform-origin: top center;
            -webkit-animation-name: swing;
            -moz-animation-name: swing;
            -o-animation-name: swing;
            animation-name: swing;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-duration: 1s;
            -webkit-animation-delay: .2s;
            -webkit-animation-timing-function: ease;
            -webkit-animation-fill-mode: both;
            -moz-animation-iteration-count: infinite;
            -moz-animation-duration: 1s;
            -moz-animation-delay: .2s;
            -moz-animation-timing-function: ease;
            -moz-animation-fill-mode: both;
            -ms-animation-duration: 1s;
            -ms-animation-delay: .2s;
            -ms-animation-timing-function: ease;
            -ms-animation-fill-mode: both;
            -o-animation-duration: 1s;
            -o-animation-delay: .2s;
            -o-animation-timing-function: ease;
            -o-animation-fill-mode: both;
            animation-iteration-count: infinite;
            animation-duration: 1s;
            animation-delay: .2s;
            animation-timing-function: ease;
            animation-fill-mode: both;
        }
        body {
            font-family: Arial;
            color: grey;
        }

    </style>
</head>

<body>


   <h2>Job Files:</h2>

    <div style="width: 400px; position: relative; float: left; background-color: red;">

        <div style="width: 400px; float: left; z-index: 10;">
            <img src="product-shoe.jpg" />
        </div>

        <div class="animated" style="width: 200px; text-align: right; float: left; position: absolute; z-index: 20; margin: 20px 0px 0px 180px;">
            <a href="#"><img src="buy_button.png" /></a>
        </div>

    </div>

    <p style="clear: both;">&nbsp;</p>

    <h2>Instructions:</h2>

    <p>(...)</p>


</body>

</html>