Filters

Example filter
Example filter with left aligned icon
Example filter with right aligned icon
 

Example filter
Example filter with left aligned icon
Example filter with right aligned icon

 
 
General CSS for filters

.filter {
  display: inline-block;
  min-width: 60px;
  height: 32px;
  margin: 0 0 8px;
  padding: 0 16px;
  cursor: pointer;
  color: #0275a7;
  font: 400 14px/32px Nunito, sans-serif;
  border-radius: 3px;
  background: #ebfaff;
}

.filter:hover {
  opacity: .8;
}

Filter variations

You can also include icons in your filter, which have the same color, but less opacity.
 
 
Filters

Filter
Filter with left aligned icon
Filter with right aligned icon
 
 
Filters with outline

Outlined filter
Outlined filter with left aligned icon
Outlined filter with right aligned icon
 
 
Inactive filters

Inactive filter
Inactive filter with left aligned icon
Inactive filter with right aligned icon
 
 
Inactive filters with outline

Inactive outlined filter
Inactive outlined filter with left aligned icon
Inactive outlined filter with right aligned icon
 
 
Additional CSS for filters

.filter.inactive {
  opacity: .5;
}

.filter.outline {
  box-shadow: 0 0 0 1px rgba(2, 117, 167, .4) inset;
}

.filter.icon .feather {
  opacity: .7;
  width: 24px;
  height: 24px;
  margin-top: -1px;
}

.filter.icon.icon-left .feather {
  margin-left: -2px;
  padding: 0 6px 0 0;
}

.filter.icon.icon-right .feather {
  margin-right: -2px;
  padding: 0 0 0 6px;
}