.buttonizer-button{ position:fixed; right: 40px; bottom: 40px; z-index: 9999; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; } .buttonizer-button .buttonizer_inner { position: relative; } .buttonizer-button:hover .c5 { opacity: 1; } .buttonizer-button a, .buttonizer-button a:hover, .buttonizer-button a:active, .buttonizer-button a:focus{ text-decoration: none; color: #fff; box-shadow: 0 5px 11px 0 rgba(0,0,0,0.18),0 4px 15px 0 rgba(0,0,0,0.15); } .c5 { font-family: Arial, \'Helvetica Neue\', Helvetica, sans-serif; position: absolute !important; opacity: 0; bottom: -23px; height: 15px !important; line-height: 15px !important; right: 0; font-size: 8px; background-color: rgba(0, 0, 0, 0.4) !important; color: #FFFFFF; text-align: center; border-radius: 2px !important; -moz-border-radius: 2px !important; -webkit-border-radius: 2px !important; } .buttonizer-button a:hover, .buttonizer-button a:focus{ background: #1D9BDB; } .buttonizer-button a{ background: #48A4DC; border-radius:50%; width:56px; height:56px; display: block; vertical-align: middle; text-align:center; color: #FFFFFF; box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12); cursor:pointer; outline:none; position: relative; transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; margin-top: 5px; line-height: 56px; } .buttonizer-button a.buttonizer_head { position: absolute; z-index: 999; bottom: 0; right: 0; } .buttonizer-button .buttonizer_inner a.buttonizer_head i { font-size: 40px; font-style: normal; width: 56px; height: 56px; line-height: 56px; display: block; text-align: center; } .buttonizer-button a.buttonizer_head .text { top: 15px; right: 70px; opacity: 0; visibility: hidden; } .buttonizer-button a.buttonizer_head.onlyone:hover .text { opacity: 1; visibility: visible; } .buttonizer-button a.buttonizer_head.onlyone i { font-size: 26px !important; } .buttonizer-button .buttonizer_inner a.buttonizer_head i, .buttonizer-button .buttonizer_inner a.buttonizer_head img { transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; } .buttonizer-button .buttonizer_inner.opened a.buttonizer_head i, .buttonizer-button .buttonizer_inner.opened a.buttonizer_head img { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .buttonizer-button i.isicon-fa { font-size: 30px !important; } .buttonizer-button .buttonizer_inner a.is_extra { position: absolute; top: 0; z-index: 1; opacity: 0; right: 9px; width: 40px; height: 40px; line-height: 40px; } .buttonizer-button .buttonizer_inner a.is_extra i { font-size: 18px; } .buttonizer-button.hide .buttonizer_inner a.buttonizer_head, .buttonizer-button.hide .buttonizer_inner a.is_extra { width:0; height: 0; bottom: 20px; right: 20px; opacity: 0; } .buttonizer-button.hide #buttonizer-sys { width:0; height: 0; bottom: 20px; right: 20px; opacity: 0; } .buttonizer-button .buttonizer_inner.opened .bt_0 { opacity: 1; top: -110px; } .buttonizer-button .buttonizer_inner.opened .bt_1 { opacity: 1; top: -160px; } .buttonizer-button .buttonizer_inner.opened .bt_2 { opacity: 1; top: -210px; } .buttonizer-button .buttonizer_inner.opened .bt_3 { opacity: 1; top: -260px; } .buttonizer-button .buttonizer_inner.opened .bt_4 { opacity: 1; top: -310px; } .buttonizer-button .buttonizer_inner.opened .share_1 { opacity: 1; left: -105px; top: -53px; } .buttonizer-button .buttonizer_inner.opened .share_2 { opacity: 1; left: -154px; top: -53px; } .buttonizer-button .buttonizer_inner.opened .share_3 { opacity: 1; left: -202px; top: -53px; } .buttonizer-button .buttonizer_inner.opened .share_1 .text, .buttonizer-button .buttonizer_inner.opened .share_2 .text, .buttonizer-button .buttonizer_inner.opened .share_3 .text { top: -35px; right: -53px; } .buttonizer-button a .text { position: absolute; top: 7px; right: 55px; text-align: right; color: #ffffff; height: 26px; line-height: 26px; font-size: 12px; padding: 0 10px; transition: all 0.1s ease-out; -moz-transition: all 0.1s ease-out; -webkit-transition: all 0.1s ease-out; -o-transition: all 0.1s ease-out; display: block; white-space: nowrap; background: #4e4c4c; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; } .buttonizer-button .share .text { opacity: 0; visibility: hidden; } .buttonizer-button a.share:hover .text { visibility: visible; opacity: 1; } .buttonizer-button a i { font-size:24px; width:24px; height:24px; }