src/css/6_components/_component.ink.button.scss
//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);
}