Button

OtherEvergreenPublic

NovaDesign System

.btn.btn-sidebar.active{
  filter: drop-shadow(-1px 6px 3px #8CE02A);
}

.cmp-button {
  --button-background: #193052;
  --button-border-top: 1px solid #0000;
  --button-border-right: 1px solid #0000;
  --button-border-bottom: 1px solid #0000;
  --button-border-left: 1px solid #0000;
  --button-border-radius-top-right: 50px;
  --button-border-radius-top-left: 50px;
  --button-border-radius-bottom-right: 50px;
  --button-border-radius-bottom-left: 50px;
  --button-gap: 8px;
  --button-padding-top: 16px;
  --button-padding-right: 16px;
  --button-padding-bottom: 16px;
  --button-padding-left: 16px;
  --button-text: bold 12px avenir next condensed;
  --button-letter-spacing: 0%;
  --button-text-color: #fff;

  button {
    background-color: var(--button-background);
    border-bottom: var(--button-border-bottom);
    border-left: var(--button-border-left);
    border-radius: var(--button-border-radius-top-left) var(--button-border-radius-top-right) var(--button-border-radius-bottom-right) var(--button-border-radius-bottom-left);
    border-right: var(--button-border-right);
    border-top: var(--button-border-top);
    color: var(--button-text-color);
    font: var(--button-text);
    gap: var(--button-gap);
    letter-spacing: var(--button-letter-spacing);
    padding: var(--button-padding-top) var(--button-padding-right) var(--button-padding-bottom) var(--button-padding-left);
    width: 100%;
  }
}

.cmp-button.theme3 {
  background: linear-gradient(266deg, #442384 0%, #25AC9F 99.58%);
  background-repeat: no-repeat;
  border-radius: .5rem;
}

Prop	Default	Type
`name`		`string`
`color`	`primary`	`string`
`variant`	`solid`	`string`
`size`	`md`	`string`

/*--- BUTTON ---*/

.cmp-button.default {
  --button-background: #442384;
  --button-gap: 8px;
  --button-width: auto;
  --button-justify: center;
  --button-border-top: 1px solid #00000000;
  --button-border-right: 1px solid #00000000;
  --button-border-bottom: 1px solid #00000000;
  --button-border-left: 1px solid #00000000;
  --button-border-radius-top-right: 4px;
  --button-border-radius-top-left: 4px;
  --button-border-radius-bottom-right: 4px;
  --button-border-radius-bottom-left: 4px;
  --button-padding-top: 8px;
  --button-padding-right: 16px;
  --button-padding-bottom: 8px;
  --button-padding-left: 16px;
  --button-text: 400 16px "Montserrat";
  --button-letter-spacing: 0%;
  --button-text-color: #ffffff;
}
.cmp-button.theme2 {
  --button-background: #25ac9f;
  --button-gap: 8px;
  --button-width: auto;
  --button-justify: center;
  --button-border-top: 1px solid #00000000;
  --button-border-right: 1px solid #00000000;
  --button-border-bottom: 1px solid #00000000;
  --button-border-left: 1px solid #00000000;
  --button-border-radius-top-right: 4px;
  --button-border-radius-top-left: 4px;
  --button-border-radius-bottom-right: 4px;
  --button-border-radius-bottom-left: 4px;
  --button-padding-top: 8px;
  --button-padding-right: 16px;
  --button-padding-bottom: 8px;
  --button-padding-left: 16px;
  --button-text: 400 16px "Montserrat";
  --button-letter-spacing: 0%;
  --button-text-color: #000000;
}
.cmp-button.theme3 {
  --button-background: #00000000;
  --button-gap: 8px;
  --button-width: auto;
  --button-justify: center;
  --button-border-top: 1px solid #00000000;
  --button-border-right: 1px solid #00000000;
  --button-border-bottom: 1px solid #00000000;
  --button-border-left: 1px solid #00000000;
  --button-border-radius-top-right: 4px;
  --button-border-radius-top-left: 4px;
  --button-border-radius-bottom-right: 4px;
  --button-border-radius-bottom-left: 4px;
  --button-padding-top: 8px;
  --button-padding-right: 16px;
  --button-padding-bottom: 8px;
  --button-padding-left: 16px;
  --button-text: 400 16px "Montserrat";
  --button-letter-spacing: 0%;
  --button-text-color: #ffffff;
}

Reference

Button