<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="shop-button"> <div class="payment"> <small>TTNET'lilere</small> <span>8,33 x 12</span> </div> <a href="" class="game"> <span>South Park: The Stick of Truth</span> </a> <a href="" class="go"><i></i></a> </div> <br> <div class="shop-button"> <div class="payment"> <small>TTNET'lilere</small> <span>8,33 x 12</span> </div> <a href="" class="game"> <span>OYUNU SATIN AL</span> </a> <a href="" class="go"><i></i></a> </div>

body { text-align: center; background: #f2f2f2; } .shop-button { position: relative; display: inline-block; margin: 50px 0; font-family: 'Titillium Web', sans-serif; box-sizing: border-box; } .shop-button .payment { z-index: 1; position: absolute; display: block; padding: 10px; left: -10px; top: 5px; bottom: 5px; background: #333; font-weight: 300; color: #fff; text-align: left; line-height: 120%; transition: all .25s ease-in-out; } .shop-button:hover .payment { left: 0; transform: translateX(-100%); } .shop-button .payment small { display: block; white-space: nowrap; font-size: 11px; } .shop-button .payment span { display: block; white-space: nowrap; font-size: 22px; } .shop-button .game { z-index: 2; box-sizing: border-box; position: relative; display: table; padding: 10px; width: 150px; height: 70px; background: #cc0000; font-size: 19px; font-weight: 400; line-height: 120%; color: #fff; text-align: center; vertical-align: middle; text-decoration: none; box-shadow: 0 0 6px rgba(0,0,0,.5); transition: all .25s ease-in-out; } .shop-button .game span { display: table-cell; vertical-align: middle; } .shop-button .go { z-index: 1; position: absolute; display: block; padding: 10px; width: 15px; right: -35px; top: 5px; bottom: 5px; background: #2c3e50; color: #fff; text-align: center; line-height: 40px; -webkit-animation: link 1.5s ease-in-out infinite; transition: all .25s ease-in-out; } .shop-button .go i { display: inline-block; margin-left: 4px; border-left: 7px solid #f2f2f2; border-right: 7px solid transparent; border-top: 7px solid transparent; border-bottom: 7px solid transparent; } @keyframes link { 0% { right: -35px; } 50% { right: -30px; } 100% { right: -35px; } }