"CSS3 Animated buttons"
Bootstrap 3.3.0 Snippet by Divscodebd

<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"> <h1 style="color:red; text-align:center;margin-top:40px; font-size:50px; font-weight:bold;">Hossain Shahid</h1> <br> <div class="row"> <div id="ballMenuContainer"> <div id="menuBall1" class="menuBall"> <a href="#" class="ball blueball"> <div class="menuText"> Party Info </div> </a> </div> <div id="menuBall2" class="menuBall"> <a href="#" class="ball redball"> <div class="menuText"> Directions </div> </a> </div> <div id="menuBall3" class="menuBall"> <a href="#" class="ball greenball"> <div class="menuText"> The Dairy </div> </a> </div> <div id="menuBall4" class="menuBall"> <a href="#" class="ball yellowball"> <div class="menuText"> Email Us </div> </a> </div> </div> </div> </div> <div class="video"> <iframe width="560" height="315" src="https://www.youtube.com/embed/mc3aTxClUAk" frameborder="0" allowfullscreen></iframe> </div>
.menuBall a:hover{ text-decoration: none; } @-webkit-keyframes pulse { 0% { -webkit-transform: scale(1) rotate(0deg); } 50% { -webkit-transform: scale(1.1) rotate(-5deg); } 100% { -webkit-transform: scale(1) rotate(0deg); } } @-o-keyframes pulse { 0% { -o-transform: scale(1) rotate(0deg); } 50% { -o-transform: scale(1.1) rotate(-5deg); } 100% { -o-transform: scale(1) rotate(0deg); } } @-moz-keyframes pulse { 0% { -moz-transform: scale(1) rotate(0deg); } 50% { -moz-transform: scale(1.1) rotate(-5deg); } 100% { -moz-transform: scale(1) rotate(0deg); } } @keyframes pulse { 0% { transform: scale(1) rotate(0deg); } 50% { transform: scale(1.1) rotate(-5deg); } 100% { transform: scale(1) rotate(0deg); } } @-webkit-keyframes bump { 0% { top: 0; } 5% { top: 3px; } 10% { top:0; } 100% { top:0; } } @-o-keyframes bump { 0% { top: 0; } 5% { top: 3px; } 10% { top:0; } 100% { top:0; } } @-moz-keyframes bump { 0% { top: 0; } 5% { top: 3px; } 10% { top:0; } 100% { top:0; } } @keyframes bump { 0% { top: 0; } 5% { top: 3px; } 10% { top:0; } 100% { top:0; } } .menuBall { position: relative; width: 100px; height: 100px; margin: 5px; display: inline-block; } .ball { position:absolute; width:100%; height:100%; -moz-border-radius: 50%; -webkit-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; border: 2px dashed #fff; margin: 10px; text-decoration: none; } .ball:hover { -webkit-animation: pulse 1s ease 0s infinite normal; -o-animation: pulse 1s ease 0s infinite normal; -moz-animation: pulse 1s ease 0s infinite normal; animation: pulse 1s ease 0s infinite normal; } .redball { background-color: #d90e23; -moz-box-shadow: 0 0 0 3px #d90e23, 2px 1px 4px 4px rgba(10,10,0,.5); -webkit-box-shadow: 0 0 0 3px #d90e23, 2px 1px 4px 4px rgba(10,10,0,.5); -o-box-shadow: 0 0 0 3px #d90e23, 2px 1px 4px 4px rgba(10,10,0,.5); box-shadow: 0 0 0 3px #d90e23, 2px 1px 6px 4px rgba(10,10,0,.5); background-image: -moz-linear-gradient(0deg, rgba(0,0,0,.25) 50%, transparent 10%),-moz-linear-gradient(rgba(0,0,0,.25) 50%, transparent 50%); background-image: -webkit-linear-gradient(0deg, rgba(0,0,0,.25) 50%, transparent 10%),-webkit-linear-gradient(rgba(0,0,0,.25) 50%, transparent 50%); background-image: -o-linear-gradient(0deg, rgba(0,0,0,.25) 50%, transparent 10%),-o-linear-gradient(rgba(0,0,0,.25) 50%, transparent 50%); background-size:10px 10px; } .blueball { -moz-box-shadow: 0 0 0 3px #d6385b, 2px 1px 4px 4px rgba(10,10,0,.5); -webkit-box-shadow: 0 0 0 3px #d6385b, 2px 1px 4px 4px rgba(10,10,0,.5); -o-box-shadow: 0 0 0 3px #d6385b, 2px 1px 4px 4px rgba(10,10,0,.5); box-shadow: 0 0 0 3px #d6385b, 2px 1px 6px 4px rgba(10,10,0,.5); background-image: -webkit-linear-gradient(35deg, #9f2e86 25%, transparent 25%, transparent 75%, #9f2e86 75%, #9f2e86), -webkit-linear-gradient(-35deg, #9f2e86 25%, transparent 25%, transparent 75%, #9f2e86 75%, #9f2e86); background-image: -moz-linear-gradient(35deg, #9f2e86 25%, transparent 25%, transparent 75%, #9f2e86 75%, #9f2e86), -moz-linear-gradient(-35deg, #9f2e86 25%, transparent 25%, transparent 75%, #9f2e86 75%, #9f2e86); background-size:20px 20px; background-color: #d6385b; } .yellowball { background-color: #7968a8; -moz-box-shadow: 0 0 0 3px #7968a8, 2px 1px 4px 4px rgba(10,10,0,.5); -webkit-box-shadow: 0 0 0 3px #7968a8, 2px 1px 4px 4px rgba(10,10,0,.5); box-shadow: 0 0 0 3px #7968a8, 2px 1px 6px 4px rgba(10,10,0,.5); background-image: -webkit-linear-gradient(90deg, transparent 50%, rgba(99,138,190,1) 50%); background-image: -moz-linear-gradient(90deg, transparent 50%, rgba(99,138,190,1) 50%); background-size: 8px 8px; } .greenball { -moz-box-shadow: 0 0 0 3px #65b37a, 2px 1px 4px 4px rgba(10,10,0,.5); -webkit-box-shadow: 0 0 0 3px #65b37a, 2px 1px 4px 4px rgba(10,10,0,.5); box-shadow: 0 0 0 3px #65b37a, 2px 1px 6px 4px rgba(10,10,0,.5); background: -webkit-radial-gradient(#e8b15e 4px, transparent 6px); background: -moz-radial-gradient(#e8b15e 4px, transparent 6px); background-size: 20px 20px; background-image: -webkit-radial-gradient(#e8b15e 15%, transparent 16%), -webkit-radial-gradient(#e8b15e 15%, transparent 16%); background-image: -moz-radial-gradient(#e8b15e 15%, transparent 16%), -moz-radial-gradient(#e8b15e 15%, transparent 16%); background-color: #65b37a; background-size:30px 30px; background-position: 0 0, 20px 20px; } .menuText { font-family: 'IdolwildRegular' , Verdana, Helvetica, Sans-Serif; font-size: larger; color: #ffffff; position: relative; vertical-align: middle; text-align: center; top: 40%; } #menuBall1 { -webkit-animation: bump 6s linear 0s infinite normal; } #menuBall2 { -webkit-animation: bump 6s linear .5s infinite normal; } #menuBall3 { -webkit-animation: bump 6s linear 1s infinite normal; } #menuBall4 { -webkit-animation: bump 6s linear 1.5s infinite normal; } #menuBall1 { -moz-animation: bump 6s linear 0s infinite normal; } #menuBall2 { -moz-animation: bump 6s linear .5s infinite normal; } #menuBall3 { -moz-animation: bump 6s linear 1s infinite normal; } #menuBall4 { -moz-animation: bump 6s linear 1.5s infinite normal; } #menuBall1 { -o-animation: bump 6s linear 0s infinite normal; } #menuBall2 { -o-animation: bump 6s linear .5s infinite normal; } #menuBall3 { -o-animation: bump 6s linear 1s infinite normal; } #menuBall4 { -o-animation: bump 6s linear 1.5s infinite normal; } #menuBall1 { animation: bump 6s linear 0s infinite normal; } #menuBall2 { animation: bump 6s linear .5s infinite normal; } #menuBall3 { animation: bump 6s linear 1s infinite normal; } #menuBall4 { animation: bump 6s linear 1.5s infinite normal; } div#partyInfo { position: absolute; bottom: 30%; top: 30%; left: 20%; right: 20%; margin: 5px; padding: 8px; z-index: 2000; text-shadow: -1px -1px #65b37a; font-family: 'IdolwildRegular' , Verdana, Helvetica, Sans-Serif; font-size: 2.5em; color: #FFFFFF; border-radius: 10px; border: 2px dashed #fff; background-color: #d90e23; -moz-box-shadow: 0 0 0 3px #d90e23, 2px 1px 4px 4px rgba(10,10,0,.5); -webkit-box-shadow: 0 0 0 3px #d90e23, 2px 1px 4px 4px rgba(10,10,0,.5); -o-box-shadow: 0 0 0 3px #d90e23, 2px 1px 4px 4px rgba(10,10,0,.5); box-shadow: 0 0 0 3px #d90e23, 2px 1px 6px 4px rgba(10,10,0,.5); } #darkMe { position:absolute; top:0; left:0; height:100%; width: 100%; background: rgba(0,0,0,0.65); z-index: 1000; -webkit-filter: blur(3px); } #darkMe.hideMe, #partyInfo.hideMe { visibility: hidden; } #darkMe.showMe, #partyInfo.showMe{ visibility:visible; } .video{ margin-left:25%; margin-top:10%; }

Related: See More


Questions / Comments: