redo button styles

- rename .btn-bs to .btn-bd-purple
- abstract yellow masthead button into .btn-bd-yellow and use it the new
docs navbar

5 files changed, 23 insertions, 20 deletions

diff --git a/_includes/nav-home.html b/_includes/nav-home.html
index 409077b08..834b6061a 100644
--- a/_includes/nav-home.html
+++ b/_includes/nav-home.html
@@ -61,5 +61,5 @@
     </li>
   </ul>
 
-  <a class="btn btn-outline-secondary d-none d-md-inline-block mb-3 mb-md-0 ml-md-3" href="{{ site.download.source }}">Download</a>
+  <a class="btn btn-bd-yellow d-none d-md-inline-block mb-3 mb-md-0 ml-md-3" href="{{ site.download.source }}">Download</a>
 </header>
diff --git a/assets/scss/_buttons.scss b/assets/scss/_buttons.scss
index a7fa5a4c1..82027459f 100644
--- a/assets/scss/_buttons.scss
+++ b/assets/scss/_buttons.scss
@@ -2,16 +2,28 @@
 //
 // Custom buttons for the docs.
 
-.btn-bs {
+.btn-bd-purple {
   font-weight: 500;
   color: $bd-purple-bright;
   border-color: $bd-purple-bright;
 
   &:hover,
-  &:focus,
   &:active {
     color: #fff;
     background-color: $bd-purple-bright;
     border-color: $bd-purple-bright;
   }
 }
+
+.btn-bd-yellow {
+  font-weight: 500;
+  color: $bd-yellow;
+  border-color: $bd-yellow;
+
+  &:hover,
+  &:active {
+    color: $bd-graphite;
+    background-color: $bd-yellow;
+    border-color: $bd-yellow;
+  }
+}
diff --git a/assets/scss/_masthead.scss b/assets/scss/_masthead.scss
index a457cb0e1..ba3a945d8 100644
--- a/assets/scss/_masthead.scss
+++ b/assets/scss/_masthead.scss
@@ -36,15 +36,6 @@
     padding: 1rem 2rem;
     font-size: 1.25rem;
     font-weight: 500;
-    color: $bd-yellow;
-    border-color: $bd-yellow;
-
-    &:hover,
-    &:focus {
-      color: $bd-graphite;
-      background-color: $bd-yellow;
-      border-color: $bd-yellow;
-    }
   }
 
   .carbonad {
diff --git a/docs/4.0/getting-started/download.md b/docs/4.0/getting-started/download.md
index 75e3609a5..9af539270 100644
--- a/docs/4.0/getting-started/download.md
+++ b/docs/4.0/getting-started/download.md
@@ -12,12 +12,12 @@ toc: true
 
 **Current version:** v{{ site.current_version}}
 
-<a href="{{ site.download.dist }}" class="btn btn-lg btn-bs" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download Bootstrap');">Download Bootstrap</a>
+<a href="{{ site.download.dist }}" class="btn btn-lg " onclick="ga('send', 'event', 'Getting started', 'Download', 'Download Bootstrap');">Download Bootstrap</a>
 
 ## Source files
 **Want to compile Bootstrap with your project's asset pipeline?** Choose this option to download our source Sass, JavaScript, and documentation files. Requires a Sass compiler, [Autoprefixer](https://github.com/postcss/autoprefixer), [postcss-flexbugs-fixes](https://github.com/luisrudge/postcss-flexbugs-fixes), and [some setup]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/build-tools/#tooling-setup).
 
-<a href="{{ site.download.source }}" class="btn btn-bs" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download source');">Download source</a>
+<a href="{{ site.download.source }}" class="btn btn-bd-purple" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download source');">Download source</a>
 
 ## Bootstrap CDN
 
diff --git a/index.html b/index.html
index 559d5063c..42b8980a8 100644
--- a/index.html
+++ b/index.html
@@ -7,7 +7,7 @@ layout: home
     {% include icons/bootstrap.svg class="mb-3" width="128" height="128" %}
     <p class="lead">Bootstrap is the most popular HTML, CSS, and JS framework in the world for building responsive, mobile-first projects on the web.</p>
     <p class="lead">
-      <a href="{{ site.baseurl }}/getting-started/download/" class="btn btn-lg" onclick="ga('send', 'event', 'Jumbotron actions', 'Download', 'Download {{ site.current_version }}');">Download Bootstrap</a>
+      <a href="{{ site.baseurl }}/getting-started/download/" class="btn btn-lg btn-bd-yellow" onclick="ga('send', 'event', 'Jumbotron actions', 'Download', 'Download {{ site.current_version }}');">Download Bootstrap</a>
     </p>
     <p class="version">Currently v{{ site.current_version }}</p>
     {% include ads.html %}
@@ -24,7 +24,7 @@ layout: home
         <h4>Managed dependencies</h4>
         <p>Include Bootstrap's source Sass and JavaScript files via Bower, Composer, Meteor, or npm. Package managed installs don't include documentation, but do include our build system and readme.</p>
         <p>
-          <a class="btn btn-bs" href="{{ site.baseurl }}/getting-started/download/#package-managers">View install methods</a>
+          <a class="btn btn-bd-purple" href="{{ site.baseurl }}/getting-started/download/#package-managers">View install methods</a>
         </p>
       </div>
       <div class="col-sm-6 mb-3">
@@ -42,7 +42,7 @@ layout: home
     <hr class="half-rule mt-0">
 
     <p><strong>Looking for something else?</strong> Compiled builds of Bootstrap's CSS and JS are also available.</p>
-    <a href="{{ site.baseurl }}/getting-started/download/" class="btn btn-bs">More download options</a>
+    <a href="{{ site.baseurl }}/getting-started/download/" class="btn btn-bd-purple">More download options</a>
   </div>
 </div>
 
@@ -72,7 +72,7 @@ layout: home
     <hr class="half-rule mt-0">
 
     <p><strong>Bootstrap is open source!</strong> It's hosted, developed, and maintained on GitHub by folks like you.</p>
-    <a href="{{ site.repo }}" class="btn btn-bs">View the GitHub project</a>
+    <a href="{{ site.repo }}" class="btn btn-bd-purple">View the GitHub project</a>
   </div>
 </div>
 
@@ -84,7 +84,7 @@ layout: home
     </p>
 
     <p class="lead">
-      <a href="{{ site.themes }}" class="btn btn-bs">Browse themes</a>
+      <a href="{{ site.themes }}" class="btn btn-bd-purple">Browse themes</a>
     </p>
 
     <img class="img-fluid mx-auto" src="{{ site.baseurl }}/assets/img/bs-themes.png" alt="Bootstrap Themes" width="1024" height="388">
@@ -109,6 +109,6 @@ layout: home
     <hr class="half-rule">
 
     <p>We showcase dozens of inspiring projects built with Bootstrap on the Bootstrap Expo.</p>
-    <a href="{{ site.expo }}" class="btn btn-bs">Explore the Expo</a>
+    <a href="{{ site.expo }}" class="btn btn-bd-purple">Explore the Expo</a>
   </div>
 </div>