13 lines
9.7 KiB
CSS
13 lines
9.7 KiB
CSS
/* ----------------------------------------------------------------------
|
|
* Product Name: CSS3 Hexagon Buttons
|
|
* Product URI: http://ollopage.com/html/hex-btn/
|
|
* Author: ollopage
|
|
* Author URI: http://ollopage.com/
|
|
* Description: CSS3 Hexagon Buttons created with pure css3 by olloPage
|
|
* Version: 1.0.1
|
|
* License: GNU General Public License v2 or later
|
|
* License URI: http://www.gnu.org/licenses/gpl-2.0.html
|
|
* Tags: CSS3 Hexagon Buttons, social buttons, buttons, ollopage
|
|
* ---------------------------------------------------------------------- */
|
|
.hb{display:inline-block;position:relative;text-align:center;z-index:0}.hb:after,.hb:before{position:absolute;content:"";left:-1px;top:0;z-index:-1}.hb:before{-webkit-transform:rotate(60deg);-moz-transform:rotate(60deg);-ms-transform:rotate(60deg);-o-transform:rotate(60deg);transform:rotate(60deg)}.hb:after{-webkit-transform:rotate(-60deg);-moz-transform:rotate(-60deg);-ms-transform:rotate(-60deg);-o-transform:rotate(-60deg);transform:rotate(-60deg)}.hb i{z-index:9;transition:all .25s ease}.hb,.hb i,.hb:after,.hb:before{-webkit-transition:all .25s ease;-moz-transition:all .25s ease;-ms-transition:all .25s ease;-o-transition:all .25s ease}.hb,.hb:after,.hb:before{box-sizing:border-box;transition:all .25s ease;background-color:#fff;border-left:1px solid #fff;border-right:1px solid #fff;color:#003871}.hb-lg{line-height:150px;font-size:150px;margin:74px 0}.hb-lg,.hb-lg:after,.hb-lg:before{height:148px;width:256px}.hb-md{line-height:74px;font-size:74px;margin:37px 0}.hb-md,.hb-md:after,.hb-md:before{height:74px;width:128px}.hb-sm{line-height:37px;font-size:37px;margin:18.5px 0}.hb-sm,.hb-sm:after,.hb-sm:before{height:37px;width:64px}.hb-xs{line-height:18.5px;font-size:18.5px;margin:9.5px 0}.hb-xs,.hb-xs:after,.hb-xs:before{height:18.5px;width:32px}.hb-lg-margin,.hb-md-margin,.hb-sm-margin,.hb-xs-margin{margin:15px;display:inline-block;overflow:hidden}.hb-lg-margin{height:296px;width:256px}.hb-md-margin{height:148px;width:128px}.hb-sm-margin{height:74px;width:64px}.hb-xs-margin{height:38px;width:32px}.spin,.spin-icon i{-webkit-transition:-webkid-transform .25s ease;-moz-transition:-moz-transform .25s ease;-ms-transition:-ms-transform .25s ease;-o-transition:-o-transform .25s ease;transition:transform .25s ease}.spin-icon:hover i,.spin:hover{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}.hb:hover,.hb:hover:after,.hb:hover:before{background:0 0;border-left:1px solid #003871;border-right:1px solid #003871;color:#003871}.hb-custom,.hb-custom:after,.hb-custom:before{background:#f39c12!important;color:#fff!important;border-left:1px solid #f39c12!important;border-right:1px solid #f39c12!important}.hb-custom:hover,.hb-custom:hover:after,.hb-custom:hover:before{background:#f1c40f!important;border-left:1px solid #f1c40f!important;border-right:1px solid #f1c40f!important;color:#000!important}.hb-facebook,.hb-facebook:after,.hb-facebook:before{background:#3B5998;border-color:#3B5998;color:#fff}.hb-facebook-inv,.hb-facebook-inv:after,.hb-facebook-inv:before,.hb-facebook:hover,.hb-facebook:hover:after,.hb-facebook:hover:before{border-color:#3B5998;color:#3B5998;background:0 0}.hb-facebook-inv:hover,.hb-facebook-inv:hover:after,.hb-facebook-inv:hover:before{background:#3B5998;border-color:#3B5998;color:#fff}.hb-twitter,.hb-twitter:after,.hb-twitter:before{background:#55ACEE;border-color:#55ACEE;color:#fff}.hb-twitter-inv,.hb-twitter-inv:after,.hb-twitter-inv:before,.hb-twitter:hover,.hb-twitter:hover:after,.hb-twitter:hover:before{background:0 0;border-color:#55ACEE;color:#55ACEE}.hb-twitter-inv:hover,.hb-twitter-inv:hover:after,.hb-twitter-inv:hover:before{background:#55ACEE;border-color:#55ACEE;color:#fff}.hb-google-plus,.hb-google-plus:after,.hb-google-plus:before{background:#db514f;border-color:#db514f;color:#fff}.hb-google-plus-inv,.hb-google-plus-inv:after,.hb-google-plus-inv:before,.hb-google-plus:hover,.hb-google-plus:hover:after,.hb-google-plus:hover:before{background:0 0;border-color:#db514f;color:#db514f}.hb-google-plus-inv:hover,.hb-google-plus-inv:hover:after,.hb-google-plus-inv:hover:before{background:#db514f;border-color:#db514f;color:#fff}.hb-youtube,.hb-youtube:after,.hb-youtube:before{background:#cc181e;border-color:#cc181e;color:#fff}.hb-youtube-inv,.hb-youtube-inv:after,.hb-youtube-inv:before,.hb-youtube:hover,.hb-youtube:hover:after,.hb-youtube:hover:before{background:0 0;border-color:#cc181e;color:#cc181e}.hb-youtube-inv:hover,.hb-youtube-inv:hover:after,.hb-youtube-inv:hover:before{background:#cc181e;border-color:#cc181e;color:#fff}.hb-linkedin,.hb-linkedin:after,.hb-linkedin:before{background:#0077b5;border-color:#0077b5;color:#fff}.hb-linkedin-inv,.hb-linkedin-inv:after,.hb-linkedin-inv:before,.hb-linkedin:hover,.hb-linkedin:hover:after,.hb-linkedin:hover:before{background:0 0;border-color:#0077b5;color:#0077b5}.hb-linkedin-inv:hover,.hb-linkedin-inv:hover:after,.hb-linkedin-inv:hover:before{background:#0077b5;border-color:#0077b5;color:#fff}.hb-tumblr,.hb-tumblr:after,.hb-tumblr:before{background:#2c4762;border-color:#2c4762;color:#fff}.hb-tumblr-inv,.hb-tumblr-inv:after,.hb-tumblr-inv:before,.hb-tumblr:hover,.hb-tumblr:hover:after,.hb-tumblr:hover:before{background:0 0;border-color:#2c4762;color:#2c4762}.hb-tumblr-inv:hover,.hb-tumblr-inv:hover:after,.hb-tumblr-inv:hover:before{background:#2c4762;border-color:#2c4762;color:#fff}.hb-rss,.hb-rss:after,.hb-rss:before{background:#da5700;border-color:#da5700;color:#fff}.hb-rss-inv,.hb-rss-inv:after,.hb-rss-inv:before,.hb-rss:hover,.hb-rss:hover:after,.hb-rss:hover:before{background:0 0;border-color:#da5700;color:#da5700}.hb-rss-inv:hover,.hb-rss-inv:hover:after,.hb-rss-inv:hover:before{background:#da5700;border-color:#da5700;color:#fff}.hb-pinterest,.hb-pinterest:after,.hb-pinterest:before{background:#da232a;border-color:#da232a;color:#fff}.hb-pinterest-inv,.hb-pinterest-inv:after,.hb-pinterest-inv:before,.hb-pinterest:hover,.hb-pinterest:hover:after,.hb-pinterest:hover:before{background:0 0;border-color:#da232a;color:#da232a}.hb-pinterest-inv:hover,.hb-pinterest-inv:hover:after,.hb-pinterest-inv:hover:before{background:#da232a;border-color:#da232a;color:#fff}.hb-vimeo,.hb-vimeo:after,.hb-vimeo:before{background:#20b9eb;border-color:#20b9eb;color:#fff}.hb-vimeo-inv,.hb-vimeo-inv:after,.hb-vimeo-inv:before,.hb-vimeo:hover,.hb-vimeo:hover:after,.hb-vimeo:hover:before{background:0 0;border-color:#20b9eb;color:#20b9eb}.hb-vimeo-inv:hover,.hb-vimeo-inv:hover:after,.hb-vimeo-inv:hover:before{background:#20b9eb;border-color:#20b9eb;color:#fff}.hb-github,.hb-github:after,.hb-github:before{background:#373a3c;border-color:#373a3c;color:#fff}.hb-github-inv,.hb-github-inv:after,.hb-github-inv:before,.hb-github:hover,.hb-github:hover:after,.hb-github:hover:before{background:0 0;border-color:#373a3c;color:#373a3c}.hb-github-inv:hover,.hb-github-inv:hover:after,.hb-github-inv:hover:before{background:#373a3c;border-color:#373a3c;color:#fff}.hb-flickr,.hb-flickr:after,.hb-flickr:before{background:#ff1981;border-color:#ff1981;color:#fff}.hb-flickr-inv,.hb-flickr-inv:after,.hb-flickr-inv:before,.hb-flickr:hover,.hb-flickr:hover:after,.hb-flickr:hover:before{background:0 0;border-color:#ff1981;color:#ff1981}.hb-flickr-inv:hover,.hb-flickr-inv:hover:after,.hb-flickr-inv:hover:before{background:#ff1981;border-color:#ff1981;color:#fff}.hb-dropbox,.hb-dropbox:after,.hb-dropbox:before{background:#007ee5;border-color:#007ee5;color:#fff}.hb-dropbox-inv,.hb-dropbox-inv:after,.hb-dropbox-inv:before,.hb-dropbox:hover,.hb-dropbox:hover:after,.hb-dropbox:hover:before{background:0 0;border-color:#007ee5;color:#007ee5}.hb-dropbox-inv:hover,.hb-dropbox-inv:hover:after,.hb-dropbox-inv:hover:before{background:#007ee5;border-color:#007ee5;color:#fff}.hb-xing,.hb-xing:after,.hb-xing:before{background:#006467;border-color:#006467;color:#fff}.hb-xing-inv,.hb-xing-inv:after,.hb-xing-inv:before,.hb-xing:hover,.hb-xing:hover:after,.hb-xing:hover:before{background:0 0;border-color:#006467;color:#006467}.hb-xing-inv:hover,.hb-xing-inv:hover:after,.hb-xing-inv:hover:before{background:#006467;border-color:#006467;color:#fff}.hb-skype,.hb-skype:after,.hb-skype:before{background:#00aceb;border-color:#00aceb;color:#fff}.hb-skype-inv,.hb-skype-inv:after,.hb-skype-inv:before,.hb-skype:hover,.hb-skype:hover:after,.hb-skype:hover:before{background:0 0;border-color:#00aceb;color:#00aceb}.hb-skype-inv:hover,.hb-skype-inv:hover:after,.hb-skype-inv:hover:before{background:#00aceb;border-color:#00aceb;color:#fff}.hb-dribbble,.hb-dribbble:after,.hb-dribbble:before{background:#ea4c89;border-color:#ea4c89;color:#fff}.hb-dribbble-inv,.hb-dribbble-inv:after,.hb-dribbble-inv:before,.hb-dribbble:hover,.hb-dribbble:hover:after,.hb-dribbble:hover:before{background:0 0;border-color:#ea4c89;color:#ea4c89}.hb-dribbble-inv:hover,.hb-dribbble-inv:hover:after,.hb-dribbble-inv:hover:before{background:#ea4c89;border-color:#ea4c89;color:#fff}.hb-tencent-weibo,.hb-tencent-weibo:after,.hb-tencent-weibo:before{background:#20B8E5;border-color:#20B8E5;color:#fff}.hb-tencent-weibo-inv,.hb-tencent-weibo-inv:after,.hb-tencent-weibo-inv:before,.hb-tencent-weibo:hover,.hb-tencent-weibo:hover:after,.hb-tencent-weibo:hover:before{background:0 0;border-color:#20B8E5;color:#20B8E5}.hb-tencent-weibo-inv:hover,.hb-tencent-weibo-inv:hover:after,.hb-tencent-weibo-inv:hover:before{background:#20B8E5;border-color:#20B8E5;color:#fff}.hb-instragram,.hb-instragram:after,.hb-instragram:before{background:#125688;border-color:#125688;color:#fff}.hb-instragram-inv,.hb-instragram-inv:after,.hb-instragram-inv:before,.hb-instragram:hover,.hb-instragram:hover:after,.hb-instragram:hover:before{background:0 0;border-color:#125688;color:#125688}.hb-instragram-inv:hover,.hb-instragram-inv:hover:after,.hb-instragram-inv:hover:before{background:#125688;border-color:#125688;color:#fff}
|