equation-admin-template/ltr/assets/css/ui-kit/buttons/social-buttons/hexagons.css

Booststrap 4 admin template made by equation

/* 2.0 - Button style
------------------------------------------------------------------------*/

/* 2.1 - Default Button style
-------------------------------------------------*/
.hb {
	display: inline-block;
	position:relative;
	text-align: center; /*  Default text align center */
	z-index: 0;
}
.hb:before, .hb:after {
	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-xs .fa { font-size: 20px !important; }
.hb-sm .fa { font-size: 30px !important; }
.hb-md .fa { font-size: 37px !important; }
.hb-lg .fa { font-size: 42px !important; }
.hb i {
	z-index: 9;
	-webkit-transition: all .25s ease;
	   -moz-transition: all .25s ease;
	    -ms-transition: all .25s ease;
	     -o-transition: all .25s ease;
	        transition: all .25s ease;
}
.hb, .hb:before, .hb:after { 
	 box-sizing: border-box;
	 /* default transition time is set .25s = 250 millisecond  
	 Uncomment following if you want to set transition on hexagon color change */ 
	 -webkit-transition: all .25s ease;
	   -moz-transition: all .25s ease;
	    -ms-transition: all .25s ease;
	     -o-transition: all .25s ease;
	        transition: all .25s ease;
}


/* 2.1 - Default Button style End
-------------------------------------------------*/



/* 2.2 - Large Button style 
-------------------------------------------------*/

.hb-lg {
	line-height: 42px;
	font-size: 42px;
	margin: 22px 0px; /* Original output, margin 0 of the button */ 
	/*margin: 89px 15px;*/ /* New output, margin 15px of the button,  74 + 15 = 89 */  
}
.hb-lg , .hb-lg:before, .hb-lg:after {  height: 42px; width: 73px;  } 

/* 2.2 - Large Button style  End
-------------------------------------------------*/



/* 2.3 - Medium Button style 
-------------------------------------------------*/

.hb-md {
	line-height: 37px;
	font-size: 37px;
	margin: 21px 0px; /* Original output, margin 0 of the button */ 
	/*margin: 52px 15px;*/ /* New output, margin 15px of the button,  37 + 15 = 52 */ 
}
.hb-md , .hb-md:before , .hb-md:after { height: 37px; width: 64px;  } 

/* 2.3 - Medium Button style End
-------------------------------------------------*/

/* 2.4 - Small Button style 
-------------------------------------------------*/

.hb-sm {
	line-height: 30px;
	font-size: 30px;
	margin: 18.5px 0px; /* Original output, margin 0 of the button */ 
	/*margin: 33.5px 15px;*/ /* New output, margin 15px of the button,  18.5 + 15 = 33.5 */ 
	
}
.hb-sm , .hb-sm:before , .hb-sm:after { height: 30px; width: 52px;  } 

/* 2.4 - Small Button style  End
-------------------------------------------------*/



/* 2.5 - Extra Small Button style 
-------------------------------------------------*/
.hb-xs {
	line-height: 18.5px;
	font-size: 18.5px;
	margin: 9.5px 0px; /* Original output, margin 0 of the button */ 
	/*margin: 33.5px 15px;*/ /* New output, margin 15px of the button,  9.5 + 15 = 24.5 */ 
}
.hb-xs , .hb-xs:before , .hb-xs:after { height:18.5px; width:32px;  }

/* 2.5 - Extra Small Button style  End
-------------------------------------------------*/


/* 2.0 - Button style End
------------------------------------------------------------------------*/


/* 3.0 - Margin of hexagon
------------------------------------------------------------------------*/
.hb-lg-margin { margin: 9px; }
.hb-md-margin { margin: 12px; }
.hb-sm-margin { margin: 14px; }
.hb-xs-margin { margin: 15px; }
.hb-lg-margin, .hb-md-margin, .hb-sm-margin, .hb-xs-margin {
	display: inline-block;
	overflow: hidden;
}
.hb-lg-margin { height: 89px; width: 73px; }
.hb-md-margin { height: 80px; width: 65px; }
.hb-sm-margin { height: 66px; width: 53px; }
.hb-xs-margin { height: 38px; width: 32px; }

/* 3.0 - Margin of hexagon End
------------------------------------------------------------------------*/


/* 5.0 - Buttons Color
------------------------------------------------------------------------*/
/* 5.1 - Default Colors
-------------------------------------------------*/
.hb, .hb:before, .hb:after {
	background-color: #2c3e50;  /*  Default background color  */ 
	border-left:1px solid #2c3e50;
	border-right:1px solid #2c3e50;
	color: #2ecc71; /* Default font color */
}
/* 5.1 - Default Colors End
-------------------------------------------------*/


/* 5.2 - Default hover colors
-------------------------------------------------*/
.hb:hover, .hb:hover:before, .hb:hover:after {
	background: transparent; 
	border-left:1px solid #2ecc71;
	border-right:1px solid #2ecc71;  
	color: #2ecc71; /* Default hover font color */
}

/* 5.2 - Default hover colors end
-------------------------------------------------*/



/* 5.3 - Custom Button colors
-------------------------------------------------*/
.hb-custom, .hb-custom:before, .hb-custom:after {
	background: #888ea8 !important;  /*  Custom background color  */
	color: white!important; /* Custom font color */
	border-left:1px solid #888ea8 !important;;
	border-right:1px solid #888ea8 !important;; 
}
/* 5.3 - Custom Button colors End
-------------------------------------------------*/



/* 5.4 - Custom Button hover colors
-------------------------------------------------*/
.hb-custom:hover,
.hb-custom:hover:before,
.hb-custom:hover:after {
	background: #3b3f5c !important;  
	border-left:1px solid #3b3f5c !important;;
	border-right:1px solid #3b3f5c !important;; 
	color: #fff!important; /* Custom hover font color */
}
/* 5.4 - Custom Button hover colors End
-------------------------------------------------*/
/* 5.0 - Buttons Color End
------------------------------------------------------------------------*/




/* 6.0 - Specific Button colors 
------------------------------------------------------------------------*/
/* 6.1 - Facebook
-------------------------------------------------*/
.hb-facebook,
.hb-facebook:before,
.hb-facebook:after {
	background: #1a73e9;
	border-color: #1a73e9;
	color: #ffffff;
}
.hb-facebook:hover,
.hb-facebook:hover:before,
.hb-facebook:hover:after {
	background: transparent;
	border-color: #3862f5;
	color: #3862f5;
}
/* 6.1 - Facebook End
-------------------------------------------------*/


/* 6.2 - Twitter
-------------------------------------------------*/
.hb-twitter,
.hb-twitter:before,
.hb-twitter:after  {
	background: #00b1f4;
	border-color: #00b1f4;
	color: #ffffff;
}

.hb-twitter:hover,
.hb-twitter:hover:before,
.hb-twitter:hover:after   {
	background: transparent;
	border-color: #00b1f4;
	color: #00b1f4;
}
/* 6.2 - Twitter End
-------------------------------------------------*/



/* 6.3 - Google Plus
-------------------------------------------------*/
.hb-google-plus,
.hb-google-plus:before,
.hb-google-plus:after {
	background: #e7515a;
	border-color: #e7515a;
	color: #ffffff;
}
.hb-google-plus:hover,
.hb-google-plus:hover:before,
.hb-google-plus:hover:after {
	background:transparent;
	border-color: #e7515a;
	color: #e7515a;
}
/* 6.3 - Google Plus End
-------------------------------------------------*/




/* 6.15 - dribbble
-------------------------------------------------*/
.hb-dribbble,
.hb-dribbble:before,
.hb-dribbble:after {
	background: #e9b02b;
	border-color: #e9b02b;
	color: #ffffff;
}
 
.hb-dribbble:hover,
.hb-dribbble:hover:before, 
.hb-dribbble:hover:after {
	background:transparent;
	border-color: #e9b02b;
	color: #e9b02b;
}
 
/* 6.15 - dribbble End
-------------------------------------------------*/