Botones

Código HTML, tomando como ejemplo el botón primario:

								
								
<!-- Extra Largo -->
<a href="#;" class="btn btn-extra-large btn-primary">Botón</a>

<!-- Largo -->
<a href="#;" class="btn btn-large btn-primary">Botón</a>

<!-- Regular -->
<a href="#;" class="btn btn-primary">Botón</a>

<!-- Pequeño -->
<a href="#;" class="btn btn-small btn-primary">Botón</a>

<!-- Muy Pequeño -->
<a href="#;" class="btn btn-very-small btn-primary">Botón</a>
								
								
							

Código HTML:

								

<!-- Botón de Acción Principal con Sombra -->
<a href="#" class="btn btn-main-action btn-box-shadow">Main Action</a>

<!-- Botón Secundario con Sombra -->
<a href="#" class="btn btn-primary btn-box-shadow">Primary</a>

								
							

Código CSS:

								

/*============================================================
BUTTONS
============================================================*/

/*General*/
.btn {
	border:none;
	border-radius: 50px;
	font-family: Raleway,"Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size: 12px;
	font-weight: 600;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 1px;
	padding: 15px 30px;
	-webkit-transition: all 0.3s cubic-bezier(0.2, 0, 0.3, 1);
    transition: all 0.3s cubic-bezier(0.2, 0, 0.3, 1);
}

.btn:hover {
	-webkit-transform: translate3d(0, -2px, 0);
    transform: translate3d(0, -2px, 0);
}

@media(max-width:768px) {
	.btn {
		font-size: 14px;
		padding: 17px 34px;
		width:100%;
		margin-bottom:10px;
	}
}

/*Tamaños*/
.btn.btn-extra-large {
  font-size: 16px;
  padding: 19px 38px;
}
.btn.btn-large {
  font-size: 14px;
  padding: 17px 34px;
}
.btn.btn-small {
  font-size: 10px;
  padding: 13px 26px;
}
.btn.btn-very-small {
  font-size: 8px;
  padding: 11px 22px;
}

@media(max-width:768px) {
	.btn.btn-extra-large {
	  font-size: 18px;
	  padding: 21px 42px;
		}
	.btn.btn-large {
	  font-size: 16px;
	  padding: 19px 38px;
	}
	.btn.btn-small {
	  font-size: 12px;
	  padding: 15px 30px;
	}
	.btn.btn-very-small {
	  font-size: 10px;
	  padding: 13px 26px;
	}
}

/*Main Action*/
.btn-main-action {
	color: #fff !important;
	background-color: #339966;
	border: 1px solid #339966;
	-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

.btn-main-action:hover,
.btn-main-action:focus,
.btn-main-action:active,
.btn-main-action i {
	color: #fff !important;
	background-color: #908233;
	border: 1px solid #908233;
}

/*Primary*/
.btn-primary {
	color: #ddd !important;
	background-color: #003366;
	border: 1px solid #003366;
	-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary i {
	color: #fff !important;
	background-color: #908233;
	border: 1px solid #908233;
}

.bg-gold-dark .btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
	color: #fff !important;
	background-color: #bca431;
	border: 1px solid #bca431;
}

/*Secondary*/
.btn-secondary {
	color: #003366 !important;
	background-color: transparent;
	border: transparent;
	-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active,
.btn-secondary i {
	color: #fff !important;
	background-color: #908233;
}

/*Disable*/
.btn-disabled {
	color: #fff;
    background-color: #999;
	opacity: .5;
	cursor: default;
}

.btn.btn-disabled,.btn:disabled,fieldset:disabled
.btn{
	color: #fff;
	pointer-events: none;
	background-color: #999;
	border-color: #999;
	opacity: .5
}

/*Outline*/
.btn-outline-main {
	border: 2px solid #339966;
	color: #339966 !important;
	-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

.btn-outline-main:hover, .btn-outline-main:focus {
	border: 2px solid #908233;
	background-color:#908233;
	color: #FFFFFF !important;
}

.btn-outline-primary {
	border: 2px solid #003366;
	color: #003366 !important;
	-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

.btn-outline-primary:hover, .btn-outline-primary:focus {
	border: 2px solid #908233;
	background-color: #908233;
	color: #FFFFFF !important;
}

/*Box Shadow*/
.btn-box-shadow {
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
.btn-box-shadow:hover {
  -webkit-box-shadow: 0 8px 30px 0 rgba(0, 0, 0, 0.4);
  box-shadow: 0 8px 30px 0 rgba(0, 0, 0, 0.4);
}

/*Icon Hover Animation*/
.btn.btn-hover-animation > span {
  display: inline-flex;
  align-items: center;
}
.btn.btn-hover-animation .btn-text {
  margin-left: 0px;
  position: relative;
  z-index: 3;
  transition: transform 0.5s;
}
.btn.btn-hover-animation .btn-icon {
  display: inline-flex;
  align-items: center;
  margin-left: -24px;
}
.btn.btn-hover-animation .btn-icon i {
  display: inline-block;
  opacity: 0;
  top: 0;
  transform: translateX(0.24px);
  transition: opacity 0.25s, transform 0.5s;
}
.btn.btn-hover-animation:hover .btn-text {
  -webkit-transform: translateX(-12px);
  transform: translateX(-12px);
}
.btn.btn-hover-animation:hover .btn-icon i {
  opacity: 1;
  -webkit-transform: translateX(12px);
  transform: translateX(12px);
}
.btn.btn-hover-animation:active {
  border-color: transparent !important;
}