More languages
More actions
/* Button.css */ .tpl-button {
display: inline-block; position:relative; padding: 4px 10px; width:100%; height:40px; border-radius: 8px; font-weight: bold; cursor: pointer;
line-height:1; text-decoration:none; text-align:center; }
.tpl-button p{
margin: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
}
.tpl-button-center > a, .tpl-button-left > a, .tpl-button-right > a{ height:40px; width:100%; }
.tpl-button-center > a,.tpl-button-left > a,.tpl-button-right > a{ height:100%; }
/* Choose where to align the button (left, right, center) */ .tpl-button-left{ display: flex; justify-content: flex-start; }
.tpl-button-center{ display: flex; justify-content: center; }
.tpl-button-right{ display: flex; justify-content: flex-end; }
/*available colors*/ .tpl-button-red {
background-color:#b50014; /* taken from Citizen.css : --color-red-3*/ color:#fff;
}
.tpl-button-red:hover{ background-color:#c33242; /* --color-red-light-3 from Citizen.css */ }
.tpl-button-blue {
background-color: #143fbf; color:#fff;
}
.tpl-button-green {
background-color: #52CF44; color:#333;
}
.tpl-button-yellow {
background-color: #FFDA1F; color:#333;
}
.tpl-button:hover{ /*colors other than red, which we use for Citizen, are automatically recalculated on a filter value*/ filter:brightness(110%) saturate(100%); }
@media screen and (max-width:768px){ .tpl-button{ width:75%!important; } .tpl-button-left,.tpl-button-center,.tpl-button-right{ display: flex; justify-content: center; }
}