Cool Social Media Buttons with landing hover - html and css Posted by Yahya Benlachheb on September 30, 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>Social Button</title> </head> <body> <div class="box"> <a class="fb ion-social-facebook" href="#"></a> <a class="tw ion-social-twitter" href="#"></a> <a class="yb ion-social-youtube" href="#"></a> <a class="wp ion-social-whatsapp" href="#"></a> <a class="im ion-social-instagram" 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: #313131; } .box{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); } .box a{ text-decoration: none; color: white; font-size: 40px; margin: 10px; display: flex; width: 60px; height: 60px; justify-content: center; align-items: center; float: left; transition: 0.5s all; cursor: pointer; } .fb{ background:#2980b9; } .tw{ background:#3498db; } .yb{ background:#e74c3c; } .wp{ background:#27ae60; } .im{ background: #e67e22; } .box a:hover{ margin-top: -10px; } Comments
Comments
Post a Comment