A Czr button using green.css uses this CSS:
.btn {
display: inline-block;
padding: 4px 12px;
margin-bottom: 0px;
font-size: 14px;
line-height: 20px;
text-align: center;
vertical-align: middle;
cursor: pointer;
color: #333;
text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.75);
background-color: #F5F5F5;
background-image: linear-gradient(to bottom, #FFF, #E6E6E6);
background-repeat: repeat-x;
border-width: 1px;
border-style: solid;
border-color: #CCC #CCC #B3B3B3;
-moz-border-top-colors: none;
-moz-border-right-colors: none;
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
border-image: none;
border-radius: 4px;
box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.2) inset, 0px 1px 2px rgba(0, 0, 0, 0.05);
}
.btn-primary {
color: #FFF;
text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.25);
background-color: #8DA65A;
background-image: linear-gradient(to bottom, #9DB668, #768D44);
background-repeat: repeat-x;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}
A similar button in Flat UI uses this code:
.btn {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0px;
font-size: 14px;
font-weight: 400;
line-height: 1.42857;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
-moz-user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
}
.btn-primary {
color: #FFF;
background-color: #428BCA;
border-color: #357EBD;
}
.btn-block {
white-space: normal;
}
.btn-lg, .btn-group-lg > .btn {
padding: 10px 19px;
font-size: 17px;
line-height: 1.471;
border-radius: 6px;
}
There will be further complexities but comparing the 2 gives you some idea of the changes you’ll need to make.