how can i select this button in css?

I think this is a simple query, but I am struggling to find a solution.
To get the buttons on my front page working, how I want I have added this code to my child stylesheet

.avia-button.avia-size-x-large { font-size: 30px; } /* for extra large buttons */
.avia-button.avia-size-large { font-size: 22px; } /* for large buttons */
.avia-button.avia-size-medium { font-size: 16px; } /* for medium buttons */
.avia-button.avia-size-small { font-size: 17px; } /* for small buttons */ 
 
.avia-button.avia-size-small, .avia-button.avia-size-medium, .avia-button.avia-size-large, .avia-button.avia-size-x-large {                                /*styling for buttons*/

font-family: 'Roboto Condensed', sans-serif;
text-shadow: 2px 4px 3px rgba(0,0,0,0.3); 
color: #FFFFFF!important;
border-color: #cd0010!important;
background-color: #cd0010;
border: 2px solid #cd0010;
box-shadow: 1px 1px 1px #cd0010;
 border-radius: 8px;
  padding: 16px 16px;
  background: -ms-linear-gradient(top,  #F20707,  #DB0000);
  background: -webkit-gradient(linear, left top, left bottom, from(#F20707), to(#DB0000));
  background: -moz-linear-gradient(top,  #F20707,  #DB0000);
}
.avia-button.avia-size-small:hover, .avia-button.avia-size-medium:hover, .avia-button.avia-size-large:hover, .avia-button.avia-size-x-large:hover{         /*hover button styling*/
color: #FFFFFF !important;
  background: #CD0010;
  background: linear-gradient(top,  #EE0000,  #da0000);
  background: -ms-linear-gradient(top,  #EE0000,  #da0000);
  background: -webkit-gradient(linear, left top, left bottom, from(#EE0000), to(#da0000));
  background: -moz-linear-gradient(top,  #EE0000,  #da0000);
}

The problem I have now is I’m working on a different page, which also has a button on it, and it’s also getting a red border because that’s marked as important. If I remove the important in the above code for border then the border no longer works on my home page which i dont want.

I tried simply prefixing the code with .page-id-431 like this: - 
.page-id-431 .avia-button.avia-size-small, .avia-button.avia-size-medium, .avia-button.avia-size-large, .avia-button.avia-size-x-large {                                /*styling for buttons*/

font-family: 'Roboto Condensed', sans-serif;
text-shadow: 2px 4px 3px rgba(0,0,0,0.3); 
color: #FFFFFF!important;
border-color: #cd0010!important;
background-color: #cd0010;
border: 2px solid #cd0010;
box-shadow: 1px 1px 1px #cd0010;
 border-radius: 8px;
  padding: 16px 16px;
  background: -ms-linear-gradient(top,  #F20707,  #DB0000);
  background: -webkit-gradient(linear, left top, left bottom, from(#F20707), to(#DB0000));
  background: -moz-linear-gradient(top,  #F20707,  #DB0000);
}

But when i do this my other page still gets the same style, like in this screenshot…. is my syntax wrong above? or is there some other way i can independently style the button on my other page (the page of the other page is page-id-802 as shown in this screenshot

http://imgur.com/RtRZCo8

thanks