gitbook-plugin-theme-bandwidth/src/less/website/buttons.less

Bandwidth Theme for GitBook

/*--BUTTONS--*/
button{
  display:inline-block;
  position: relative;
  padding: 15px 50px;
  border-radius: 50px;
  background-color: #00bcec;
  border: none;
  color: #fff;
  font-size: .9em;
  font-weight:900;
  text-transform:uppercase;
  cursor: pointer;
  cursor: hand;
  overflow:hidden;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
  &:hover{
    background-color: #009ac1;
  }
  &:focus{
    outline: none;
  }
  &:active{
    top:2px;
  }
}
*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
button.free-trial{
  background:#ff673c;
  border: 1px solid #ff673c;
  font-size: .85em;
  padding: 7px 20px;
}
button.free-trial:hover{
  color: #a53f0c;
}
button.secondary{
  background:rgba(0,188,236, 0.0);
  border: 1px solid #fff;
}
button.secondary:hover{
  background-color: rgba(0,0,0, 0.4);
}
button.hover-go:hover:before{
  left: 85%;
}
button.hover-go:before{
  left: 160%;
  top: 0;
}
button.hover-back:before{
  left: -60%;
  top: 0;
}
button.hover-back:hover:before{
  left:8%;
}
button.hover-go:before, .hover-back:before {
  position: absolute;
  height: 100%;
  font-size: 125%;
  line-height: 3.5;
  color: #fff;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}
button.right:before {
  content: "\f116";
}
button.left:before{
  content: "\f116";
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}
button.hover-go:before, button.hover-back:before{
  font-family: 'Bandwidth';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 2.8;
  -webkit-font-smoothing: antialiased;
}
button.hover-go:after, button.hover-back:after {
  content: '';
  position: absolute;
  z-index: -1;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}
button.light{
  color: #243a51;
  border:	1px solid #243a51;
}
button.light:hover{
  color: #fff;
  background-color: #243a51;
}
button.medium{
  font-size: .8em;
  padding:13px 40px;
}
button.small{
  font-size: .6em;
  padding:11px 30px;
}
button.submit{
  background-color: #51B54A;
}
button.submit:hover{
  background-color: #43963d;
}
button.cancel{
  background-color: #D74227;
}
button.cancel:hover{
  background-color: #b1351e;
}
#smsexpand, #smsfulltut{
  background-color: #2af9ba;
  color:#005c44;
}
#smsexpand:hover, #smsfulltut:hover, #smscard a:hover {
  color: #fff !important;
}
#voiceexpand, #voicefulltut{
  background-color: #a95adf;
}
#voicefulltut{
  border-left: 1px solid #c3c3e6;
}
#voiceexpand:hover, #voicefulltut:hover{
  color: #4d2966 !important;
}
#pnexpand, #pnfulltut{
  background-color: #651f45;
}
#pnfulltut{
  border-left: 1px solid #c3c3e6;
}
#pnexpand:hover, #pnfulltut:hover{
  color: #a95adf !important;
}
.fulltut{
  display: inline-block;
  opacity: 0;
  border-radius: 0px 50px 50px 0px;
  font-size: .8em;
  padding: 9px 30px;
  vertical-align: top;
  background-color: #a95adf;
  border-left: 1px solid #b9fdeb;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}
.active .fulltut{
  opacity: 1;
}
.active .iconic-button{
  border-radius: 0px 50px 50px 0px;
  -ms-transform: rotate(180deg); /* IE 9 */
    -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
    transform: rotate(180deg);
}
.iconic-button{
  display:inline-block;
  position: relative;
  height: 2.5em;
  width: 2.5em;
  padding: 0px;
  border-radius: 50em;
  background-color: #00bcec;
  border: none;
  color: #fff;
  font-size: 2em;
  cursor: pointer;
  cursor: hand;
  overflow: hidden;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;

}
.iconic-button:hover > i{
	font-size: 1.2em;
}
.iconic-button:focus{
	outline: none;
}
.iconic-button:active{
	top:2px;
}
.iconic-secondary{
	background:rgba(0,188,236, 0.0);
	border: 1px solid #fff;
}
.iconic-light{
	color: #243a51;
	border:	1px solid #243a51;
}
.iconic-medium{
	font-size: 1.5em;
}
.iconic-small{
	font-size: 1em;
}
i{
  -webkit-transition: all 0.1s;
  -moz-transition: all 0.1s;
  transition: all 0.1s;
}
.aimg {
  border-bottom: none;
}
a img {
  border:none;
  vertical-align:top;
}
.devCards a{
  pointer-events: none;
}
.devCards.active a{
  pointer-events: all;
}