ivabus/www
1
0
Fork 0
mirror of https://github.com/ivabus/www synced 2024-11-22 13:55:05 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

Hover effects for top CTA

Browse source
This commit is contained in:
Thomas Smith 2023-01-23 16:12:11 -05:00
parent 78ac0de690
commit dc582d818c
1 changed files with 53 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

63
src/layouts/partials/navbar.html
View file

@ -5,7 +5,7 @@
aria-controls="offcanvasRight" aria-expanded="false" aria-label="Toggle navigation">
MENU
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<div class="collapse navbar-collapse flex" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto my-auto">
{{ range .Site.Menus.main }}
<li class="nav-item mt-lg-0 mt-md-0 mt-sm-3 mt-3">
@ -15,23 +15,66 @@
<li class="nav-item mt-lg-0 mt-md-0 mt-sm-3 mt-3">
<a class="nav-link" aria-current="page" href="https://github.com/teaxyz/cli/stargazers">GIVE A STAR (&#9734;<span class="stargazers"></span>)</a>
</li>
<a href="https://github.com/teaxyz/cli" class="ms-3">
<button class="purple-btn-top purple-bg">INSTALL TEA (<span class="release" style="text-transform: lowercase;"></span>)</button>
</a>
<style>
.purple-btn-top{
color: white;
border:none;
width: 225px;
height: 4.5vw !important;
.hbtn {
font-family: "pp-neue-machina";
background-color: #8000ff;
position: relative;
box-sizing: border-box;
height: 4.4vw !important;
display: inline-block;
overflow: hidden;
padding: 8px 20px;
width: 300px;
text-align: center;
border:none;
text-decoration: none;
color: rgb(255, 255, 255);
white-space: nowrap;
z-index: 0;
}
.hbtn i {
padding-right: 8px;
}
.hb-fill-right::before {
position: absolute;
content: "";
background: rgb(91, 0, 184);
transition-duration: 0.3s;
z-index: -1;
inset: 0px auto auto 0px;
width: 0px;
height: 100%;
opacity: 1;
}
.hb-fill-right:hover::before {
width: 100%;
height: 100%;
opacity: 1;
}
.hb-fill-right:hover {
color: rgb(255, 255, 255);
background: rgb(91, 0, 184);
transition: color 0.3s ease 0s, background 0s ease 0.3s;
}
</style>
</ul>
<a href="#" class="ms-3">
<button class="hbtn hb-fill-right">INSTALL TEA (<span class="release" style="text-transform: lowercase;"></span>)</button>
</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>