Buttons

With a single click, the user can take action and buttons are used all over the Ryte Tool. All our buttons look like buttons, and there are different types to indicate different usage and button states.


 
 
General CSS for buttons

button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: auto;
  height: 32px;
  padding: 0 16px;
  color: #636b7b;
  font: 400 14px/32px Nunito, sans-serif;
  cursor: pointer;
  border: 0;
  border-radius: 3px;
  outline: 0;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(43, 45, 80, .1), 0 2px 5px 0 rgba(43, 45, 80, .08), 0 1px 1.5px 0 rgba(0, 0, 0, .07), 0 1px 2px 0 rgba(0, 0, 0, .08);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

button:hover {
  transition: all .15s ease;
  box-shadow: 0 0 0 1px rgba(43, 45, 80, .1), 0 2px 5px 0 rgba(43, 45, 80, .1), 0 3px 9px 0 rgba(43, 45, 80, .08), 0 1px 1.5px 0 rgba(0, 0, 0, .08), 0 1px 2px 0 rgba(0, 0, 0, .08);
}

button:focus {
  transition: all .15s ease;
  box-shadow: 0 0 0 2px #0292d2, 0 2px 5px 0 rgba(43, 45, 80, .1), 0 1px 1px 0 rgba(0, 0, 0, .07), 0 1px 2px 0 rgba(0, 0, 0, .08);
}

button:disabled {
  color: #a1b1c1;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background: #fafbfb;
  box-shadow: 0 0 0 1px #e6e7ea;
}

Primary buttons

This is the most prominent button and has the most visual weight to ensure it will get the utmost attention. It is important to guide the user through the interface and is used to highlight the most important actions like starting a new crawl or connecting Google Search Console in our Free Ryte Tool. Only one primary button per page instance should be used.
 
 
Primary blue button


 
 
Upsell green button


 
 
Primary red button


 
 
Additional CSS for primary buttons

button.btn-blue {
  color: #fff;
  background: #0292d2;
  box-shadow: 0 2px 5px 0 rgba(43, 45, 80, .08), 0 1px 1.5px 0 rgba(0, 0, 0, .07), 0 1px 2px 0 rgba(0, 0, 0, .08);
}

button.btn-blue:hover {
  color: #fff;
  background: #0280b9;
  box-shadow: 0 2px 5px 0 rgba(43, 45, 80, .1), 0 3px 9px 0 rgba(43, 45, 80, .08), 0 1px 1.5px 0 rgba(0, 0, 0, .08), 0 1px 2px 0 rgba(0, 0, 0, .08);
}
 
button.btn-blue:disabled {
  opacity: .5;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
 
button.btn-green {
  color: #fff;
  background: #03bc9d;
  box-shadow: 0 2px 5px 0 rgba(43, 45, 80, .08), 0 1px 1.5px 0 rgba(0, 0, 0, .07), 0 1px 2px 0 rgba(0, 0, 0, .08);
}

button.btn-green:hover {
  color: #fff;
  background: #03a388;
  box-shadow: 0 2px 5px 0 rgba(43, 45, 80, .1), 0 3px 9px 0 rgba(43, 45, 80, .08), 0 1px 1.5px 0 rgba(0, 0, 0, .08), 0 1px 2px 0 rgba(0, 0, 0, .08);
}
 
button.btn-green:disabled {
  opacity: .5;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
 
button.btn-red {
  color: #fff;
  background: #f16b8b;
  box-shadow: 0 2px 5px 0 rgba(43, 45, 80, .08), 0 1px 1.5px 0 rgba(0, 0, 0, .07), 0 1px 2px 0 rgba(0, 0, 0, .08);
}

button.btn-red:hover {
  color: #fff;
  background: #ef5479;
}
 
button.btn-red:disabled {
  opacity: .5;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

Secondary buttons

The secondary buttons are used to provide futher interactions beside the primary call to actions. Any number of secondary buttons can be used per page.
 
 
Secondary white button


 
 
Secondary outline button


 
 
Additional CSS for secondary buttons

button.outline {
  border: 1px solid #72808E;
  background: transparent;
  box-shadow: none;
}
 
button.outline:focus {
  box-shadow: 0 0 0 2px #0292d2;
}

button.outline:disabled {
  border: 1px solid #e6e7ea;
  background: transparent;
}

Button variations

In addition, there are some special versions for buttons.
 
 
Button with a left aligned icon


 
 
Button with a right aligned icon


 
 
Additional CSS for button variations

button .icon {
  display: inline-flex;
  vertical-align: middle;
  width: 16px;
  height: 16px;
  pointer-events: none;
}

button .icon.icon-left {
  margin: 0 8px 0 0;
}

button .icon.icon-right {
  margin: 0 0 0 8px;
}