Custom CSS for loginbuttons from accounts-ui Meteor package

Using MeteorJS, it is really easy to just add a simple login accounts system using packages. The problem arises when we try to customise the CSS to our will. Some complex solutions can be found olnine, but I found it easier to just right-click and “inspect” the CSS from web developer tools in Chromium Browser.

 

Below is the CSS I used to customise loginbuttons, just copy and paste this into your own apps style sheet and change as you see fit.

#login-buttons .login-close-text, #login-buttons .additional-link{
  color: #000;
  text-transform: lowercase;
  font-family: 'Source Code Pro';
}

#login-buttons .login-link-text, .accounts-dialog label, .accounts-dialog .title{
    text-transform: lowercase;
    font-family: 'Source Code Pro';
}

#login-buttons .login-button, .accounts-dialog .login-button{
    color: #000;
    background: #c9cacc;
    border: 1px solid #c9cacc;
    border-radius: 4px;
    text-transform: lowercase;
}