diff --git a/_includes/nav-home.html b/_includes/nav-home.html
index 409077b084a767a1fc9e697fbbe805eba8b9a069..834b6061ad02cb9736f9bde5add33a1431e6588f 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 a7fa5a4c18ad9f8ffc4b57fe62ab1ce8be36ca9e..82027459fa95f13fe20add5e8568a899d98bc089 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 a457cb0e183912004b5920ad715b17391f8599a1..ba3a945d88b7472bd37cfa71cb03fbfaf7d95fb2 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 75e3609a541f98ef8da2172a641d4a5c5c9a7253..9af5392701496f2b758c04dae4e7e9c5b7d1c2db 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 559d5063ce019365d829c833f68f582eecd88e03..42b8980a82c4e3a161da736e90982749640abf72 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>