Cannot apply CSS custom class in material design - css

Question

<div class="col-md-offset-4 col-md-6">
<div style="margin-top: 50%">
<md-input-container class="col-md-10">
<label>
Username
</label>
<input type="text" ng-model="user.userName">
</md-input-container>
</div>
<br>
<div>
<md-input-container class="col-md-10">
<label>
Password
</label>
<input ng-model="user.userPassword">
</md-input-container>
</div>
<br>
<div class="col-md-10">
<a style="color: #2e98d6; border: 1px solid #2e98d6; text-transform: none; cursor: pointer;
min-height: 36px; min-width: 150px; font-weight: 500; font-size: 14px; border-radius: 37px;
padding: 0 20px;" class="md-button md-primary primary-btn pull-right" ng-click="doLogin()">Login</a>
</div>
</div>
I am trying to apply custom css class to my angular material but it is not working but if I using inline style then I can.

Answer 1

This works! So some of the styles were getting overridden by angular-material class, the simplest fix for this will be to add !important to the CSS properties that are getting overridden!
How to check what is getting overridden?
Open the console, select the element that you want to check, click the element and check for the CSS class you added, if any of the properties of that particular class have a strikethrough on them, then you add !important on that particular property!
Note: Since the stylesheets were not provided, I worked with the classes added by angular-material by default. Also Please ignore the Javascript part in the fiddle.
JSFiddle Demo
CSS:
.button-customize{
color: #2e98d6 !important;
border: 1px solid #2e98d6;
text-transform: none;
cursor: pointer;
min-height: 36px;
min-width: 150px;
font-weight: 500;
font-size: 14px;
border-radius: 37px !important;
padding: 0 20px;
}