posabsolute/inker

View on GitHub
src/css/6_components/_component.ink.button.scss

Summary

Maintainability
Test Coverage
//generic layout
table.button,
table.tiny-button,
table.small-button,
table.medium-button,
table.large-button {
  overflow: hidden;
  margin:0;

}

table.button td,
table.tiny-button td,
table.small-button td,
table.medium-button td,
table.large-button td {
  display: block;
  width: auto;
  text-align: center;
  transition: background-color 0.5s ease;
  background: #2ba6cb;
  color: #ffffff;
  padding: 0px 0;
  border-radius: 3px;
}

table.button td a{
  font-size: 16px; 
  font-family: Helvetica, Arial, sans-serif; 
  color: #ffffff; 
  text-decoration: none;
  border-radius: 3px; 
  padding: 12px 18px; 
  border: 1px solid #2178cf; 
  display: inline-block;
  border-radius: 3px;
}


table.tiny-button td a{
  padding: 5px 0 4px;
}

table.small-button td a{
  padding: 8px 7px 7px 7px;
  font-size: 14px;
}

table.medium-button td a{
  padding: 12px 0 10px;
}

table.large-button td a{
  padding: 21px 0 18px;
}


table.tiny-button td a {
  font-size: 12px;
  font-weight: normal;
}

table.small-button td a {
 
}

table.medium-button td a {
  font-size: 20px;
}

table.large-button td a {
  font-size: 24px;
}

table.button:hover td,
table.button:visited td,
table.button:active td {
  background: #2795b6;
}

table.button:hover td a,
table.button:visited td a,
table.button:active td a {
  color: #fff;
}

table.button:hover td,
table.tiny-button:hover td,
table.small-button:hover td,
table.medium-button:hover td,
table.large-button:hover td {
  background: #2795b6;
}

table.button:hover td a,
table.button:active td a,
table.button td a:visited{
  color: #ffffff; 
}


//themes
table.btn-blue td,
table.btn-blue td a{
  background:#2178cf;
}


table.btn-blue td:hover,
table.btn-blue td a:hover{
  background:#1a68b6;
  color:#fff!important;
}
table.btn-blue td a:active{
  background:#1a68b6;
  color:#fff!important;
  box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
}