Style the Bread Button

There are various button styling and checkout flow decisions that can be customized to fit your brand and customer flow. Using the customCSS property, you can override default Bread styling and CSS.

Button Structure

#bread-button[.bread-btn, .bread-label][.bread-logged-out, .bread-as-low-as, .bread-no-terms, .bread-show-terms]
 .bread-embed-inner
   .bread-center
     .bread-center-inner
       .bread-text[.bread-pot, .bread-as-low-as, .bread-for]
         [span.bread-amt
         span.bread-dur]
 .bread-embed-icon

Note: We do not recommend using the external generated DOM structure outside of the button iframe for styling or manipulating the button in your own CSS. This external structure is subject to change without notice.

Button States:

The main button element has an id attribute of #bread-button. The button can have the following states, represented by classes on the element:

  • If the button has the actAsLabel option set to false, it is assigned the bread-btn class. Otherwise, it is assigned the bread-label class
  • Depending on the current state of the user checking out, an additional class is added:
    • bread-logged-out if the user is not logged in
    • bread-as-low-as if the user is not logged in and the asLowAs option is set to true
    • bread-no-terms if the button cannot provide an exact monthly payment amount for the logged in user
    • bread-show-terms if the button can provide a monthly payment amount for the logged in user

Inside #bread-button, the .bread-text has an additional class state:

  • bread-pot is the default state, displaying “Pay Over Time” in the default CSS
  • bread-as-low-as if the user is not logged in and the asLowAs option is set to true
  • bread-for when the user is logged in and the button can provide a monthly payment amount

Best Practices

  • Use a service like CSS Compressor or CSS Minifier to compress your CSS into a single string.
  • Leave height and width out of your customCSS. Those dimensions should be handled by a containing element and normal CSS.
  • Use @import to include custom fonts.
  • Use the content property on pseudo elements (:before and :after) to add your own custom words and phrases to the button.
  • Ensure the selectors and properties you leverage are available to the browsers your site supports. You may need to use browser pre-fixed properties to get the best support.
  • Consider the responsiveness of your site: Does that need to translate to your button styling?

customCSS Examples

The following is a good starting point for styling the button with customCSS, creating a basic gray button with hover:

Example Button

Example CSS (Button):

/* Include custom fonts with @import */
@import url("https://fonts.googleapis.com/css?family=Roboto:400,700");
html, body, #bread-button {
  height: 100%;
  margin: 0;
  width: 100%;
}
body {
  display: table;
}
#bread-button {
  /* Base button styles */
  background: #197797;
  color: #FFF;
  border-radius: 6px;
  display: table-cell;
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  text-align: center;
  vertical-align: middle;
  /* Modify or remove transition here */
  transition: all 0.3s ease;
}
.bread-btn {
  cursor: pointer;
}
#bread-button.bread-btn:hover {
  /* Button hover state */
  background: #209cc5;
}
.bread-embed-inner, .bread-label .bread-embed-icon {
  display: inline-block;
}
.bread-label .bread-embed-icon:after {
  /* Icon that shows the bread tooltip on hover */
  background: rgba(255, 255, 255, 0.5);
  border-radius: 50px;
  color: #333;
  content: "i";
  cursor: pointer;
  display: inline-block;
  line-height: 1;
  margin-left: 8px;
  padding: 4px 9px;
}
.bread-pot:before {
  /* Content for the default state. */
  content: "Pay Over Time";
}
.bread-btn .bread-as-low-as:before,
.bread-label .bread-as-low-as:before {
  /* Prefix for buttons with asLowAs set to true */
  content: "As low as ";
}
.bread-for:before {
  /* Prefix for logged in users */
  content: "For ";
}

Example CSS (Button) in Compressed Form

@import url(https://fonts.googleapis.com/css?family=Roboto:400,700);#bread-button,body,html{height:100%;margin:0;width:100%}body{display:table}#bread-button{background:#197797;color:#FFF;border-radius:6px;display:table-cell;font-family:Roboto,sans-serif;font-size:16px;text-align:center;vertical-align:middle;transition:all .3s ease}.bread-btn{cursor:pointer}#bread-button.bread-btn:hover{background:#209cc5}.bread-embed-inner,.bread-label .bread-embed-icon{display:inline-block}.bread-label .bread-embed-icon:after{background:rgba(255,255,255,.5);border-radius:50px;color:#333;content:"i";cursor:pointer;display:inline-block;line-height:1;margin-left:8px;padding:4px 9px}.bread-pot:before{content:"Pay Over Time"}.bread-btn .bread-as-low-as:before,.bread-label .bread-as-low-as:before{content:"As low as "}.bread-for:before{content:"For "}

Example Button (Link Style)

@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600');
#bread-button,body,html {
    height:100%;
    margin:0;
    width:100%;
}
body {
    display:table;
}
#bread-button {
    background:#EEE;
    color:#181818;
    display:table-cell;
    font-family:"Open Sans",sans-serif;
    font-size:16px;
    text-align:center;
    vertical-align:middle;
}
.bread-text {
    cursor:pointer;
    text-decoration:underline;
    transition: all 0.2s ease;
}
.bread-text:hover {
    color:#197797;
}
.bread-dur {
    text-transform:lowercase;
    word-spacing:-3px;
    margin-left:-3px
}
.bread-embed-inner,.bread-label .bread-embed-icon {
    display:inline-block;
}
.bread-btn .bread-as-low-as:before,.bread-label .bread-as-low-as:before {
    content:"As low as ";
}
.bread-btn .bread-for:before {
    content:"For ";
}

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600);#bread-button,body,html{height:100%;margin:0;width:100%}body{display:table}#bread-button{background:#EEE;color:#181818;display:table-cell;font-family:"Open Sans",sans-serif;font-size:16px;text-align:center;vertical-align:middle}.bread-text{cursor:pointer;text-decoration:underline;transition:all .2s ease}.bread-text:hover{color:#197797}.bread-dur{text-transform:lowercase;word-spacing:-3px;margin-left:-3px}.bread-embed-inner,.bread-label .bread-embed-icon{display:inline-block}.bread-btn .bread-as-low-as:before,.bread-label .bread-as-low-as:before{content:"As low as "}.bread-btn .bread-for:before{content:"For "}