diff --git a/src/pivotal-ui/components/buttons/buttons.scss b/src/pivotal-ui/components/buttons/buttons.scss
index 5c12f7f30..fb0cc11ee 100644
--- a/src/pivotal-ui/components/buttons/buttons.scss
+++ b/src/pivotal-ui/components/buttons/buttons.scss
@@ -100,6 +100,12 @@ parent: button
btn btn-secondary |
This button should be used for the secondary action on the page. e.g. the upgrade button in the signup flow |
+
+ |
+ |
+ btn btn-tertiary |
+ This button should be used whenever necessary. e.g. the Platform dropdown on the Enterprise install page |
+
|
|
@@ -167,6 +173,10 @@ parent: button
}
}
+.btn-tertiary {
+ @include button-skin($btn-tertiary-color, $btn-tertiary-bg, $btn-tertiary-border, null, $btn-tertiary-border-hover, $btn-tertiary-bg-hover);
+}
+
.btn-link {
@include button-skin($btn-link-color, $btn-link-bg);
}
diff --git a/src/pivotal-ui/components/pui-variables.scss b/src/pivotal-ui/components/pui-variables.scss
index e4da61a87..926072fcd 100644
--- a/src/pivotal-ui/components/pui-variables.scss
+++ b/src/pivotal-ui/components/pui-variables.scss
@@ -503,6 +503,12 @@ $btn-secondary-border: $npm-brand;
$btn-secondary-border-hover: darken($npm-brand, 10%);
$btn-secondary-gradient-color: rgba(202, 56, 56, 0.15);
+$btn-tertiary-color: $npm-brand;
+$btn-tertiary-bg: $neutral-11;
+$btn-tertiary-bg-hover: lighten($npm-brand, 47%);
+$btn-tertiary-border: $npm-brand;
+$btn-tertiary-border-hover: darken($npm-brand, 10%);
+
$btn-link-color: $link-color !default;
$btn-link-bg: transparent !default;