Button styling

This commit is contained in:
Thomas Smith 2022-09-07 15:27:28 -04:00
parent a470be70fc
commit 78e970c58d
5 changed files with 56 additions and 3 deletions

View file

@ -12,5 +12,10 @@
</div>
</div>
</div>
<hr>
<div class="row button-container">
<a href="#" role="button" class="btn btn-primary auth-btn mt-lg-0 mt-md-0 mt-sm-4 mt-4" id="nav-cta">Authenticate with tea</a>
</div>
<hr>
</section>
{{ end }}

View file

@ -0,0 +1,2 @@
<hr>
<hr>

View file

@ -1,6 +1,6 @@
<nav class="navbar bg-dark navbar-expand-lg navbar-dark sticky-top my-auto main-nav">
<div class="container-fluid top-nav">
<a class="navbar-brand" href="#"><img src="/Images/tea-main-logo.svg" style="width:100px;"></a>
<a class="navbar-brand" href="#"><img src="/Images/tea-logo-1.png"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span>
@ -22,7 +22,9 @@
</li>
{{ end }}
</ul>
<a class="btn btn-primary auth-btn mt-lg-0 mt-md-0 mt-sm-4 mt-4" id="nav-cta" href="https://github.com/login/oauth/authorize?client_id=9d1f1a72f1300b6991df&state=teaxyz" role="button"><span id="cta-text">Authenticate with tea</span><span class="badge rounded-pill bg-primary ms-3"><span id="count1">287</span></span><span id="lp-text"></span></a>
<!--
<a class="btn btn-primary auth-btn mt-lg-0 mt-md-0 mt-sm-4 mt-4" id="nav-cta" href="https://github.com/login/oauth/authorize?client_id=9d1f1a72f1300b6991df&state=teaxyz" role="button"><span id="cta-text">Authenticate with tea</span><span class="badge rounded-pill bg-primary ms-3"><span id="count1">287</span></span><span id="lp-text"></span></a>-->
</div>
</div>
</nav>
<hr>

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

View file

@ -18,10 +18,13 @@ body{
/* Navbar General */
div.container-fluid.top-nav{
padding-left: 0px !important;
}
.navbar{
background-color: #1a1a1a !important;
height: 80px;
border-bottom: 2px solid #949494;
}
.nav-item{
@ -115,3 +118,44 @@ p{
}
}
/* Buttons */
a{
}
.btn-primary{
padding: 65px 80px;
border-radius: 0px !important;
font-family: "pp-neue-machina", sans-serif;
text-transform: uppercase;
font-size: 38px;
border-left: 2px solid #949494 !important;
border-right: 2px solid #949494 !important;
background-color: #1a1a1a !important;
outline: none !important;
box-shadow: none !important;
text-align: left;
border-top-color:#1a1a1a;
border-bottom-color: #1a1a1a;
}
.btn-primary:hover{
background-color: #00ffd0 !important;
color: #1a1a1a;
border-top-color:#00ffd0;
border-bottom-color:#00ffd0;
}
.button-container{
padding: 0px 160px;
}
/* Spacers & Dividers */
hr{
border-bottom: 2px solid #949494 !important;
opacity: 1;
margin:0px !important;
}