Dynamic payment buttons: Change more payment options link into a button

When using Dynamic payment buttons, the more payment options link can be styled to look more like a button with this style code modification. 

Example:

Before:

Here's how to add that button style to the More payment options link:

Code to use:

/* -- Additional payment methods styles -- */
.shopify-payment-button__more-options {
  border:1px solid $colorSplash !important; 
  padding: 10px;
  border-radius:2px;
  font-family:  $accentFontStack;
  text-transform: uppercase;
  background-color: $colorSplash;
  font-size: 14px;
  font-weight: normal;
  letter-spacing: 1px;
  @include prefix('user-select', 'none');
  -webkit-appearance: none;
  -moz-appearance: none;
  &:hover:not([disabled]){
    background-color: darken($colorSplash, 12%);
  }
  &:hover,
  &:active,
  &:focus {
    background-color: darken($colorSplash, 10%);
    outline: none;
    text-decoration:none !important;
  }  
}
/* - end - */

The border color of the button is pulled from your Accent color choice in the theme settings:

As well as the hover background color. You can adjust that Accent color in your theme settings. 

To force the button background color to be a different color from your accent color, you can add this in addition to the above code. Add this extra code after: 

/* -- code to change dynamic payment buy now button color -- */
.shopify-payment-button__more-options { 
    border: 1px solid #111111 !important;  
    background-color: #111111 !important;
    color: #FFFFFF;
  &:hover,
  &:active,  
  &:focus {
    border: 1px solid #999999 !important; 
    background-color: #999999 !important;
  }  
}
/* - end - */

In that example, the background will be black (#111111) and the foreground text will be white (#FFFFFF). The hover, active and focus states will be a dark grey (#999999).

Where do I add the code?

Use this link to learn where exactly to add this code snippet:

Where to add your CSS style code