css3 animated button ( Source Code )

css3 animated button ( Source Code )

HTML

<div class="container"> <div class="welcome-text"> <div class="single-text"> <h2> Julia Doe</h2> <a href="#"><span>Contact Us</span></a> </div> </div> </div>


css


body{ margin:0; padding: 0; } .container{ height: 100vh; width: 100%; background-image: url(https://i.postimg.cc/0ybf2n2v/a3.jpg); -webkit-background-size:cover; background-size:cover; background-position: center center; } .welcome-text{ position: relative; display: table; margin: 0; height: 100%; width: 100%; z-index: 1; } .single-text{ display: table-cell; vertical-align: middle; text-align: center; } .single-text h2 { font-size: 80px; text-transform: uppercase; font-family: merienda; color: #262626; margin: 0 0 20px; } .single-text a { position: absolute; font-size: 24px; text-decoration: none; background: tomato; padding: 15px 50px; overflow: hidden; transform: translate(-40%, -20%); font-family: Roboto; } .single-text a:before{ content: ''; position: absolute; transition: .4s ease-in-out; height: 100%; background: #262626; top: 0; left: -100%; width: 100%; } .single-text a:hover:before{ left: 0; z-index: -1; } .single-text a span{ color: #000; transition: .4s ease-in-out; z-index: 1; } .single-text a:hover span{ color: #fff; }