<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <br/><br/> <div class="showcode"> <a href="#" class="code-link" data-ex-link="http://themeforest.net"> <span class="coupon-code" data-original-title="" title="">2016TATILRA50</span> <span class="show-code">Show Code</span> </a> </div>

.showcode { max-width: 220px; position: relative; z-index: 1; } .coupon-code { border-radius: 0; box-shadow: none; display: block; overflow: hidden; font-size: 15px; padding-right: 20px; font-weight: 600; height: auto !important; line-height: 45px; text-align: right; color: #121212; padding-right: 15px; background-color: #f3f6f9; } .show-code, .color2 { background-color: #00bcd4 !important; border-color: #00bcd4 !important; color: #ffffff !important; } .show-code { color: #ffffff; font-size: 15px; height: 45px; line-height: 45px; padding: 0 20px 0 20px; position: absolute; font-weight: 600; text-align: center; text-transform: uppercase; top: 0; border-radius: 0; width: 80%; left: 0; -webkit-transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s; background: repeating-linear-gradient( 45deg, transparent, transparent 10px, #02b3c9 10px, #02b3c9 20px), linear-gradient( to bottom, #00BCD4, #00BCD4); } a:hover, a:focus { color: #00bcd4 !important; text-decoration:none; } .show-code:hover, .color2:hover { background-color: #00aec6 !important; border-color: #00aec6 !important; color: #ffffff !important; } .show-code:hover { width: 100%; }