Buttons With Awesome Hover Effects With HTML And CSS Posted by Yahya Benlachheb on September 15, 2017 Get link Facebook Twitter Pinterest Email Other Apps HTML CODE <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> <title></title> </head> <body> <div class="btns"> <a class="ion-android-compass" style="background:#F44336;" href="#"></a> <a class="ion-android-mail" style="background:#2196F3;" href="#"></a> <a class="ion-android-lock" style="background:#4caf50;" href="#"></a> <a class="ion-social-twitch" style="background:#ff9800;" href="#"></a> <a class="ion-android-folder" style="background:#795548;" href="#"></a> </div> </body> </html> CSS CODE @import "http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css"; body{ margin: 0; padding: 0; background: #2d2d2d; } .btns{ overflow: hidden; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } .btns a { text-decoration: none; color: white; width: 60px; height: 60px; display: flex; margin: 0 10px; border-radius: 50%; float: left; font-size: 32px; align-items: center; justify-content: center; } .btns a:hiver{ box-shadow: 0px 0px 30px #cddc39; color: #cddc39; } Comments
Comments
Post a Comment