Spotful Design System

Buttons

.btn {
    font-size:: 14px;
    font-family: Calibre-SemiBold;
    padding: 0.55em 3em 0.25em;
    letter-spacing: 0.25px;
    border-radius: 3px;
}
        

Primary Action Button

.btn-action {
  color: #FFFFFF;
  background-color: #4644FD;
  border: 1px solid #4644FD;
}

.btn-action:hover {
  background-color: #6B6AFE;
  cursor: pointer;  
}
.btn-action:active {
  background-color: #4644FD;
  border: 1px solid #6B6AFE;
}

Secondary Action Button

.btn-secondary {
  color: #4644FD;
  background-color: #FFFFFF;
  border: 1px solid #4644FD;
}

.btn-secondary:hover {
  color: #FFFFFF;
  background-color: #4644FD;
  cursor: pointer;  
}
.btn-secondary:active {
  background-color: #6B6AFE; 
}

Primary Button

.btn-primary {
  color: #FFFFFF;
  background-color: #6787FF;
  border: 1px solid #6787FF;
}

.btn--primary:hover {
  border: 1px solid #4644FD;
  background-color: #6B6AFE;
  box-shadow: inset 0px -1px 0 0 #4644FD;
  cursor: pointer;  
}
.btn-primary:active {
  background-color: #4644FD; 
}

Danger Button

.btn-danger {
  color: #FF3C4B;
  background-color: #FFFFFF;
  border: 1px solid #9A9AB1;
}

.btn-danger:hover {
  border: 1px solid #FF3C4B;
  box-shadow: inset 0px -1px 0 0 #FF3C4B;
  cursor: pointer;  
}
.btn-danger:active {
  box-shadow: none; 
}

Neutral Button

.btn-neutral {
  color: #696984;
  background-color: #FFFFFF;
  border: 1px solid #9A9AB1;
}

.btn-neutral:hover {
  color: #4644FD;
  box-shadow: inset 0px -1px 0 0 #9A9AB1;
  cursor: pointer;  
}
.btn-neutral:active {
  color: #6B6AFE;
  box-shadow: none; 
}

Icon Button

.btn-icon {
  color: #696984;
  background-color: #FFFFFF;
  border: 1px solid #9A9AB1;
}

.btn-icon:hover {
  color: #4644FD;
  box-shadow: inset 0px -1px 0 0 #9A9AB1;
  cursor: pointer;  
}
.btn-icon:active {
  color: #6B6AFE;
  box-shadow: none; 
}

Disabled Buttons

.disable {
  opacity: 0.5;
  cursor: default;
  cursor-event: none;
}

Blue Text Button

.blue-text-btn {
  color: #6787FF;
}

.blue-text-btn:hover {
  color: #4644FD;
  cursor: pointer;  
}
.blue-text-btn:active {
  color: #6787FF; 
}

Gray Text Button

.gray-text-btn {
  color: #9A9AB1;
}

.gray-text-btn:hover {
  color: #696984;
  cursor: pointer;  
}
.gray-text-btn:active {
  color: #9A9AB1; 
}

Dropdown Menu

.list-btn {
  color: #696984;
}

.list-btn:hover {
  color: #6787FF;
  cursor: pointer;  
}
.list-btn:active {
  color: #4644FD; 
}