Buttons

buttons.markdown

Buttons

A Pen by Allen Goodreds on CodePen.

License.

index.html

<div class="constrain">

  <button class="btn-startup" type="text">Button</button>
  
  <button class="btn-bevel" type="text">Button</button>
  
  <button class="btn-crisp" type="text">Button</button>
  
    <button class="btn-raised" type="text">Button</button>
  
  <button class="btn-flat" type="text">Button</button>
  
  <button class="btn-trendy" type="text">Button</button>
  
</div>

style.css

html{
  background: #EFF0F2;
}

.constrain{
  max-width: 150px;
  padding: 60px;
  margin: 0 auto;
}

button{
  margin-bottom: 40px;
  text-align: center;
  width: 100%;
  display: block;
  cursor: pointer;
}

.btn-startup{
  font-size: 16px;
  font-weight: bold;
  color: #FFFFFF;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.18);
  line-height: 1.5;
  padding: .5em 2em;
  border: none;
  background-image: linear-gradient(-180deg, 	#80D1F3 0%, #4A90E2 100%);
  box-shadow: 0 1px 2px 0 rgba(74,144,226,0.44), 	0 2px 8px 0 rgba(0,0,0,0.14);
  border-radius: 6px;
} 

.btn-startup:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 6px 0 rgba(74,144,226,0.20), 0 4px 9px 0 rgba(0,0,0,0.20);
}

.btn-bevel{
  font-size: 16px;
  font-weight: bold;
  font-size: 16px;
  color: #FFFFFF;
  line-height: 1.5;
  padding: .5em 2em;
  background-image: linear-gradient(-180deg, 	#6EB1FF 0%, #4A90E2 100%);
  border: 1px solid #3F84E1;
  box-shadow: 0 1px 2px 0 rgba(0,0,0,0.20), 	inset 0 3px 2px 0 rgba(255,255,255,0.16);
  border-radius: 5px;
} 

.btn-bevel:hover {
  background-image: linear-gradient(-180deg, 	#77B6FD 0%, #5999E5 100%);
}

.btn-crisp{
  font-size: 16px;
  font-weight: bold;
  color: #3275C3;
  line-height: 1.5;
  padding: .5em 2em;
  background: #EBF4FF;
  border: 1px solid #72ABED;
  box-shadow: 0 1px 2px 0 rgba(0,0,0,0.20);
  border-radius: 5px;
} 

.btn-crisp:hover {
  border: 1px solid #4A75A8;
}

.btn-raised{
  font-size: 16px;
  font-weight: bold;
  color: #FFFFFF;
  line-height: 1.5;
  padding: .5em 2em;
  border: none;
  background: #4A90E2;
  box-shadow: 0 2px 0 0 #316CB0;
  border-radius: 6px;
} 

.btn-raised:hover {
  background: #5999E5;
}

.btn-flat{
  font-size: 16px;
  color: #FFFFFF;
  line-height: 1.5;
  padding: .5em 2em;
  border: none;
  background: #4A90E2;
  border-radius: 20px;
} 

.btn-flat:hover {
  background: #5999E5;
}

.btn-trendy{
  font-size: 16px;
  color: #4D5259;
  line-height: 1.5;
  font-weight: bold;
  padding: .5em 2em;
  background: #FFFFFF;
  border: 2px solid #4D5259;
  box-shadow: 4px 4px 0 0 #4D5259;
} 

.btn-trendy:hover {
  box-shadow: 8px 8px 0 0 #4D5259;
}