<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="container"> <div class="row"> <div class="col-md-12 text-center"> <!--submit button hover effect--> <div class="css3-button"> <a href="#">Click Here To Submit</a> </div> <!--donate button hover effect--> <div class="animat-button"> <button class="hoverable-css"><span class="anim"></span>DONATE</button> </div> </div> </div> </div>

a{ -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; text-decoration:none; } /*submit button hover effect*/ .css3-button{margin:20px 0; text-align:center;} .css3-button a{display:inline-block; width:250px; font-weight:bold; padding:10px 20px;; margin:auto; color:#ffffff; background: linear-gradient(to right, #134477 50%,#aece61 50%) no-repeat scroll right bottom / 210% 100% #134477 !important; border-radius:45px;} .css3-button a:hover{ text-decoration:none; background-position: left bottom !important;} /*donate button hover effect*/ .hoverable-css{ background-color: #e6be1e; border-radius: 3px; font-size: 14px; font-weight: bold; line-height: 13px; border: 1px solid #e6be1e; color: #fff; padding: 13px 21px 13px 21px; text-transform: uppercase; font-family:arial; position: relative; overflow: hidden; cursor:pointer;} .anim { -moz-transform: translateY(-50%) translateX(-50%); -ms-transform: translateY(-50%) translateX(-50%); -webkit-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); position: absolute; top: 50%; left: 50%; } .anim:before { position: relative; content: ''; display: block; margin-top: 100%; } .anim:after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; border-radius: 50%; } .hoverable-css:hover .anim:after { -moz-animation: anim-out-pseudo 0.75s; -webkit-animation: anim-out-pseudo 0.75s; animation: anim-out-pseudo 0.75s; } .hoverable-css:hover .anim { -moz-animation: anim-out 0.75s; -webkit-animation: anim-out 0.75s; animation: anim-out 0.75s; } @-webkit-keyframes anim-out { 0% { width: 0%; } 100% { width: 100%; } } @-moz-keyframes anim-out { 0% { width: 0%; } 100% { width: 100%; } } @-ms-keyframes anim-out { 0% { width: 0%; } 100% { width: 100%; } } @keyframes anim-out { 0% { width: 0%; } 100% { width: 100%; } } @-webkit-keyframes anim-out-pseudo { 0% { background: rgba(0, 0, 0, 0.25); } 100% { background: transparent; } } @-moz-keyframes anim-out-pseudo { 0% { background: rgba(0, 0, 0, 0.25); } 100% { background: transparent; } } @-ms-keyframes anim-out-pseudo { 0% { background: rgba(0, 0, 0, 0.25); } 100% { background: transparent; } } @keyframes anim-out-pseudo { 0% { background: rgba(0, 0, 0, 0.25); } 100% { background: transparent; } }