@font-face {
font-family: 'icomoon';
src:url('../fonts/icomoon/icomoon.eot');
src:url('../fonts/icomoon/icomoon.eot?#iefix') format('embedded-opentype'),
url('../fonts/icomoon/icomoon.woff') format('woff'), url('../fonts/icomoon/icomoon.ttf') format('truetype'), url('../fonts/icomoon/icomoon.svg#icomoon') format('svg');
font-weight: normal;
font-style: normal;
} /* General button style (reset) */ .btn {
border: none;
font-family: inherit;
font-size: inherit;
color: inherit;
background: #0095cd;
cursor: pointer;
padding: 5px;
display: inline-block;
margin: 15px 30px;
text-transform: lowercase;
letter-spacing: 1px;
font-weight: 700;
outline: none;
position: absolute;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
height: 20;
}
.btn:after {
content: '';
position: absolute;
z-index: -1;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
} /* Pseudo elements for icons */
.btn:before,
.icon-heart:after,
.icon-star:after,
.icon-plus:after,
.icon-file:before {
font-family: 'icomoon';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
position: relative;
-webkit-font-smoothing: antialiased;
} 1 / 4
.icon-envelope:before {
content: "\e000";
}
.icon-cart:before {
content: "\e007";
}
.icon-cart-2:before {
content: "\e008";
}
.icon-heart:before {
content: "\e009";
} /* Filled heart */
.icon-heart:after,
.icon-heart-2:before {
content: "\e00a";
}
.icon-star:before {
content: "\e00b";
} /* Filled star */
.icon-star:after,
.icon-star-2:before {
content: "\e00c";
}
.icon-arrow-right:before {
content: "\e00d";
}
.icon-arrow-left:before {
content: "\e003";
}
.icon-truck:before {
content: "\e00e";
}
.icon-remove:before {
content: "\e00f";
}
.icon-cog:before {
content: "\e010";
}
.icon-plus:before,
.icon-plus:after {
content: "\e011";
}
.icon-minus:before {
content: "\e012"; 2 / 4
}
.bh-icon-smiley:before {
content: "\e001";
}
.bh-icon-sad:before {
content: "\e002";
}
.icon-file:before {
content: "\e004";
}
.icon-remove-2:before {
content: "\e005";
} /* Button 1 */ .btn-1 {
border: 3px solid #fff;
color: #fff;
} /* Button 1a */
.btn-1a:hover,
.btn-1a:active {
color: #0e83cd;
background: #fff;
} /* Button 1b */
.btn-1b:after {
width: 100%;
height: 0;
top: 0;
left: 0;
background: #fff;
}
.btn-1b:hover,
.btn-1b:active {
color: #0e83cd;
} .btn-1b:hover:after, .btn-1b:active:after {
height: 100%;
} /* Button 1c */
.btn-1c:after {
width: 0%;
height: 100%;
top: 0;
left: 0;
background: #fff;
} 3 / 4
.btn-1c:hover,
.btn-1c:active {
color: #0e83cd;
} .btn-1c:hover:after, .btn-1c:active:after {
width: 100%;
} /* Button 1d */ .btn-1d {
overflow: hidden;
}
.btn-1d:after {
width: 0;
height: 103%;
top: 50%;
left: 50%;
background: #fff;
opacity: 0;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
.btn-1d:hover,
.btn-1d:active {
color: #0e83cd;
} .btn-1d:hover:after {
width: 90%;
opacity: 1;
} .btn-1d:active:after {
width: 101%;
opacity: 1;
} /* Button 1e */ .btn-1e {
overflow: hidden;
}
.btn-1e:after {
width: 100%;
height: 0;
top: 50%;
left: 50%;
background: #fff;
opacity: 0;
-webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
-moz-transform: translateX(-50%) translateY(-50%) rotate(45deg);
-ms-transform: translateX(-50%) translateY(-50%) rotate(45deg);
transform: translateX(-50%) translateY(-50%) rotate(45deg);
- / 4