<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 ----------> <script type="text/javascript" src="//use.typekit.net/rym7bcj.js"></script> <script type="text/javascript">try{Typekit.load();}catch(e){}</script> <div class="container"> <h1>Simple Expanding Effect</h1> <a href="javascript:void(0);" class="button">Check it out</a><a href="javascript:void(0);" class="button-readmore"><span>Case Study</span></a> </div>

html, body { height: 100%; overflow: hidden; } body { background-color: #202024; font-family: "freight-sans-pro"; font-weight: 300; color: #eee; height: 100%; font-size: 1.4em; } .container { width: 60%; margin: auto; padding-top: 10%; height: 60%; } h1 { margin-bottom: 15px; } .button { position: relative; display: inline-block; color: #202024; text-decoration: none; text-transform: uppercase; background-color: rgba(255,255,255,0.3); border-radius: 300px; padding: 8px 24px 8px 24px; transition: all 0.25s; vertical-align: top; margin-right: 10px; } .button:hover { background-color: rgba(255,255,255,0.6); } .button-readmore { display: inline-block; background-color:rgba(0,0,0,0.3); text-decoration: none; border-radius: 300px; border: 1px solid rgba(255,255,255,0.3); color: rgba(255,255,255,0.3); height: 44px; width: 44px; position: relative; text-transform: uppercase; overflow: hidden; transition: all 0.35s; } .button-readmore:hover { width: 159px; border: 1px solid #fff; color: #fff; } .button-readmore span { position: absolute; display: inline-block; top: 0; left: 37px; width: 159px; height: 44px; line-height: 44px; text-align: center; transition: left 0.25s; } .button-readmore:hover span { left: 0; } .button-readmore:before { position: absolute; top: 0; left: 0; content:"..."; display: block; height: 44px; width: 44px; font-weight: 600; font-size: 24px; text-align: center; transition: left 0.35s; } .button-readmore:hover:before { left: -37px; }