/*! * Contact Buttons Plugin Demo 0.1.0 * https://github.com/joege/contact-buttons-plugin * * Copyright 2015, José Gonçalves * * Licensed under the MIT license: * http://www.opensource.org/licenses/MIT */ #contact-buttons-bar { position: fixed; top: 120px; left: -50px; width: 50px; z-index: 999; } #contact-buttons-bar.slide-on-scroll { position: absolute; } .contact-button-link { display: block; width: 40px; height: 40px; padding: 0; margin-bottom: 1px; text-align: center; line-height: 40px; font-size: 16px; background: #8e8e93; color: #fff; position: relative; left: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 250ms; -moz-transition: all 250ms; transition: all 250ms; } .contact-button-link:hover, .contact-button-link:focus, .contact-button-link:active { color: #fff; padding-left: 20px; width: 70px; } .contact-button-link.cb-hidden { left: -50px; } .contact-button-link.facebook { background: #3b5998; } .contact-button-link.phone { background: #3b5998; } .contact-button-link.whatsapp { background: #1fa524; } .contact-button-link.email { background: #d41111; } .contact-button-link.instagram { background: #5E46A3; } .contact-button-link.gplus { background: #db4437; } .contact-button-link.twitter { background: #1DA1F2; } .contact-button-link.separated { margin-top: 1em; } .show-hide-contact-bar, .contact-button-link.show-hide-contact-bar:focus, .contact-button-link.show-hide-contact-bar:active { background: transparent; color: #000; border: 0; outline: 0; padding: 0; width: 50px; } .contact-button-link.show-hide-contact-bar:hover { color: #000; background: #ccc; padding: 0; width: 50px; }