Components

Buttons

Base Code

Buttons are best used to enable a user to commit a change or complete steps in a task. They are typically found inside forms, modals, or pages. An example of their usage is confirming the deletion of an account in a modal. 

    
    <button class="neon_btn neon_btn_primary">
        Cancel
    </button>
    
.neon_btn_sm {
  height: 24px;
  border-radius: 12px;
  min-width: 40px;
  cursor: pointer;
  font-family: Lato;
  letter-spacing: 0;
  text-align: center;
}

.neon_btn {
  height: 32px;
  border-radius: 24px;
  min-width: 130px;
  cursor: pointer;
  font-family: Lato;
  font-size: 14px;
  letter-spacing: 0;
  text-align: center;
}

Variants

Primary Button

Used for the principal call to action on a page or modal.

Created with Sketch. Default Hover Selected Disabled 
/* Button-Primary */
.neon_btn_primary {
  border: 0px;
  background-color: #0074D9;
  color: #fff;
  padding: 0px 10px;
}

.neon_btn_primary:hover {
  border: 0px;
  background-color: #00539E;
  color: #fff;
}

.neon_btn_primary:active {
  border: 0px;
  background-color: #002D41;
  color: #fff;
}

.neon_btn_primary.disabled {
  border: 0px;
  background-color: #757575;
  color: #fff;
}

.neon_btn_primary.disabled:hover {
  border: 0px;
  background-color: #757575;
  color: #fff;
}

.neon_btn_primary.disabled:active {
  border: 0px;
  background-color: #757575;
  color: #fff;
}

Secondary Button

Button that are used for secondary actions such as exporting a data table.

Created with Sketch. Default Hover Selected Disabled 
    
/* Button-Secondary */
.neon_btn_secondary {
  border: 1px solid #0074D9;
  background-color: #fff;
  color: #0074D9;
  padding: 0px 10px;
}

.neon_btn_secondary:hover {
  border: 1px solid #0074D9;
  background-color: #00539e;
  color: #0074D9;
}

.neon_btn_secondary:active {
  border: 0px;
  background-color: #002d41;
  color: #fff;
}

.neon_btn_secondary.disabled {
  border: 1px solid #bfbfbf;
  background-color: #fff;
  color: #bfbfbf;
}

.neon_btn_secondary.disabled:hover {
  border: 1px solid #bfbfbf;
  background-color: #fff;
  color: #bfbfbf;
}

.neon_btn_secondary.disabled:active {
  border: 1px solid #bfbfbf;
  background-color: #fff;
  color: #bfbfbf;
}

Danger Button

Used to warn users of an irreversible action that is about to take place - such as "Delete Account"

Created with Sketch. Default Hover Selected Disabled 

/* Button-Danger */
.neon_btn_danger {
  border: 0px;
  background-color: #dc143c;
  color: #fff;
  padding: 0px 10px;
}

.neon_btn_danger:hover {
  border: 0px;
  background-color: #a60f2d;
  color: #fff;
}

.neon_btn_danger:active {
  border: 0px;
  background-color: #4c0715;
  color: #fff;
}

.neon_btn_danger.disabled {
  border: 0px;
  background-color: #757575;
  color: #fff;
}

.neon_btn_danger.disabled:hover {
  border: 0px;
  background-color: #757575;
  color: #fff;
}

.neon_btn_danger.disabled:active {
  border: 0px;
  background-color: #757575;
  color: #fff;
}

Text Button

Buttons that do not require primary dominance on a page. Typically initiate utilities and configurations.

Created with Sketch. Default Hover Selected Disabled 

/* Button-Link */
.neon_btn_link {
  border: 0px;
  background-color: #fff;
  color: #0074D9;
  padding: 0px 10px;
}

.neon_btn_link:hover {
  border: 0px;
  background-color: #fff;
  color: #00539e;
}

.neon_btn_link:active {
  border: 0px;
  background-color: #fff;
  color: #00539e;
}

.neon_btn_link.disabled {
  border: 0px;
  background-color: #fff;
  color: rgba(117, 117, 117, .5);
}

.neon_btn_link.disabled:hover {
  border: 0px;
  background-color: #fff;
  color: rgba(117, 117, 117, .5);
}

.neon_btn_link.disabled:active {
  border: 0px;
  background-color: #fff;
  color: rgba(117, 117, 117, .5);
}

Buttons with Icons

Buttons can contain a combination of a clear label and an icon.  Buttons that contain icons  prompt additional convey more meaning, such as dropdown (down carat), create new (plus sign), delete (trashcan), etc.

Created with Sketch. Default Default Default 16px 9px 9px 9px 
.neon_btn.neon_btn_dropdown {
  text-align: left;
}

.neon_btn.neon_btn_dropdown:after {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid;
  content: "";
  float: right;
  margin-top: 8px;
}

.neon_btn_primary.neon_btn_dropdown:after {
  border-top-color: #fff;
}

.neon_btn_secondary.neon_btn_dropdown:after {
  border-top-color: #0074D9;
}

Icon Buttons

Icon buttons are used in submenu and expansion menus in order to conserve space. Upon hover and selection the icon button turns blue and includes a CSS animation.

Created with Sketch. Batch Donation Honor Memory
Group 5
Created with Sketch. Honor Memory 15px 15px 10px 48px 48px 

  .navigation_panel_circle_style {
    height: 48px;
    width: 48px;
    border-radius: 24px;
    font-size: 16px;
    line-height: 18px;
    background-color: #F4F6F9;
    position: relative;
    color: #002D41;
  }

  .navigation_panel_circle_style:after {
    position: absolute;
    pointer-events: none;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    content: '';
    box-sizing: content-box;
  }

  .navigation_panel_circle_style:after {
    top: -3px;
    left: -3px;
    padding: 3px;
    box-shadow: 0 0 0 4px #0074D9;
    transition: transform 0.2s, opacity 0.2s;
    transform: scale(.8);
    opacity: 0;
  }

  .navigation_panel_circle_style {
    transition: background 0.2s, color 0.2s;
  }

Like Button

The like button is used to favorite an account so the user may have quicker access in the future.

Close Button

The close button is used to close modals and panels. It is found in the top right corner of the object it is closing.


  <div class="icon-box">
    <svg class="icon-close scale" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12"><title>Close</title><polygon points="12 1.4 10.6 0 6 4.6 1.4 0 0 1.4 4.6 6 0 10.6 1.4 12 6 7.4 10.6 12 12 10.6 7.4 6 12 1.4"/></svg>
  </div>

.icon-close {
  position: absolute;
  top: 1.2rem;
  right: 1.2rem;
  width: $base-spacing;
  height: $base-spacing;
  cursor: pointer;
  line-height: 0;
  fill: rgba(white, .85);
  backface-visibility: hidden;
  will-change: fill, transform;
  transition: fill .1s ease-in-out, transform .1s ease-out;

  &:hover {
    fill: white;
  }

  &.scale {
    transform: scale3d(0.6,0.6,0.6);
    &:hover {
      transform: scale3d(0.8,0.8,0.8);
    }
  }

  &.rotate {
    transform: rotate3d(0,0,1, 45deg);
    &.rotate-cw:hover {
      transform: rotate3d(0, 0, 1, 0deg);
    }
    &.rotate-ccw:hover {
      transform: rotate3d(0, 0, 1, 90deg);
    }
  }
}

/* Example to change icon color */
#miniMenu .icon-close {
  fill: rgba(black, .85);

  &:hover {
    fill: black;
  }
}