"css button hover effect"
Bootstrap 3.0.0 Snippet by Divscodebd

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ----------> <html> <head> <title>css Animation Button</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="comtainer"> <div class="button"> <a href="">Home</a> <a href="">About</a> <a href="">Contact</a> <a href="">Service</a> </div> </div> <di class="clearfix"></div> <div class="container"> <div class="row" style="margin-top:30px;"> <div class="col-md-4"> <div class="embed-video"> <iframe src="https://www.youtube.com/embed/mc3aTxClUAk" frameborder="0" allowfullscreen></iframe> </div> </div> <div class="col-md-4"> <div class="embed-video"> <iframe src="https://www.youtube.com/embed/R0g_9g9vb2A" frameborder="0" allowfullscreen></iframe> </div> </div> <div class="col-md-4"> <div class="embed-video"> <iframe src="https://www.youtube.com/embed/R0g_9g9vb2A" frameborder="0" allowfullscreen></iframe> </div> </div> </div> </div> </body> </html>
body{ margin: 0px; padding: 0px; font-family: sans-serif; background: #fff; color: #fff; } .comtainer{ width: 90%; margin: auto; background: #f5f5f5; height: auto; } .button{ text-align: center; line-height: 100px; height: 100px; width: 600px; border-radius: 140px; background: #222; } .button a{ padding: 10px 25px; color: #fff; background: red; text-decoration: none; transition: all .5s ease-in; } .button a:nth-child(1){ background: blue; } .button a:nth-child(2){ background: green; } .button a:nth-child(3){ background: yellow; color: #222; } .button a:nth-child(4){ background: pink; } .button a:hover{ border-radius: 10px; transition: all .5s ease-in; } .embed-video{ padding:10px; box-shadow:10px 1px 4px -6px #222; } .embed-vide iframe{ width:100%; height:250px; }

Related: See More

Vue Material Kit PRO
Hover Effect Style
Different types of hover and transition effect.
Sonar Wave Effect in Circle With CSS

Questions / Comments: