"Download Button"
Bootstrap 3.3.0 Snippet by badrrehman

Post to Facebook Tweet this

<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html> <head> <title>Download Button - Badr Rehman</title> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> <link rel="stylesheet" type="text/css" href=" https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <style type="text/css"> .download{ padding-left: 5px; margin:5px; transition: all .7s cubic-bezier(0.79, -0.42, 0, 1.07); transform: scaleX(0.08); transform-origin: center; } .download:hover{ transform: scale(1.1); -webkit-animation: scalling 0.7s ease-out infinite normal; animation: scalling 0.7s ease-out infinite normal; } @-webkit-keyframes scalling { 0% { -webkit-transform: scale(0.9); transform: scale(0.9); } 25% { -webkit-transform: scale(1); transform: scale(1); } 60% { -webkit-transform: scale(0.9); transform: scale(0.9); } 100% { -webkit-transform: scale(0.9); transform: scale(0.9); } } .butn{ display: block; font-family: roboto; font-size: 50px; text-align: center; border: 1px solid #d43333; } .butn-download{ background-color: #fff; color: red; text-decoration: none; } .butn-download:hover{ text-decoration: none; content: "Download Now"; color: red; } .butn:hover{ display: block; background-color: #d43333; color: #000; } body{ background-image:url(https://lh3.googleusercontent.com/oQM0dF_rYhBYeF1ZgtXk28dHt2DmFNXNqTbIsNI134WHqbSG4kULdN83V5EMXAyPfxgSvmFYTvr1QhSizrUicYd5r8ajfA1vl4t7LlCOq16M3xn4FbZxEtqD8rFyqE9pQzKopUIzPSu0HbedZgpUd9_mQgbuTUk1alzb8e0a6vV3cL9J-ZJLDKtnzfYnA08cStW3Eil55ohzW-3eA2VQIfuadj7iyakT68m5G7nTaaNUmnT900cFAOu8bzMBhSb34BJ-zxSQG7Ss912dqPYKD6MeXZ5snEuFzopjTjvBKOF8G0Iaku9wbjmYFCtkaWTaDwGmOPpwVbxbT-zoXh_5AHpgz-UFBCkXPAkyfJoNCz_-XnB9QBhWYcMXa2H7oG3jztSKW0YTYGPYZKznlWRX_Ny1kN-MoSI6kEsy3oZ5J-Uuq_5m9RynoMQuOG6O86kYsaRVkcQIV5ap-wcZkRafyhPNPdsNTsytCwMPfIL0-vJcuYWdR8iqIQ3xKwEwuPz4CKXA8YXIoX-zQ9RSV4mh9fbhgXoDwBy4cGVTjkHWSdn2Tf0qVRsqPh2punwj2k9i2qLH3xeAXD-BdvTIc882ypdjPzSkWMMAaY69Whg=w1209-h637-no); background-size: cover; background-attachment: fixed; background-repeat: no-repeat; } .text{ font-size: 100px; text-align: center; font-weight: bold; font-family: roboto; color: #fff; } .block{ background-color: rgba(0,0,0,0.6); position: absolute; width: 1280px; height: 600px; margin-left: 2%; margin-top: 2%; } .block-2{ position: relative; margin-top: 15%; } </style> </head> <body> <section> <div class="block"> <div class=" block-2"> <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12"> </div> <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12"> <div class="download"> <a class="butn butn-download" href="#"><i class="fa fa-heart"></i></a> </div> </div> <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12"> </div> <div class="text"> <p>HOVER ME <h1>Badr Rehman</h1> </p> </div> </div> </section> <section> </section> </div> </body> </html>

Related: See More

Material Kit React
Hexa shape button
Loading Button
Material toggle button

Questions / Comments: