ivabus/www
1
0
Fork 0
mirror of https://github.com/ivabus/www synced 2024-11-10 09:45:17 +03:00
Code Issues Actions Packages Projects Releases Wiki Activity

New split button CTA

Browse source
This commit is contained in:
Thomas Smith 2023-01-23 18:15:54 -05:00
parent cab9feccb4
commit d912284690
2 changed files with 55 additions and 61 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

62
src/layouts/partials/full-width-cta-split.html
View file

@ -1,18 +1,66 @@
<hr> <hr>
<div class="row button-container"> <div class="row button-container flex">
<a href="https://github.com/teaxyz/cli/stargazers" role="button" class="btn btn-primary auth-btn mt-lg-0 mt-md-0 mt-sm-0 mt-0 split-btn" id="nav-cta"><i class="icon-enter-arrow"></i>STAR ON GITHUB (&#9734;<span class="stargazers"></span>)</a> <a href="https://github.com/teaxyz/cli" class="ps-0 pe-0 btn-div" >
<a href="https://github.com/teaxyz/cli" role="button" class="btn btn-primary auth-btn mt-lg-0 mt-md-0 mt-sm-0 mt-0 split-btn split-right" id="nav-cta"><i class="icon-enter-arrow"></i>INSTALL TEA (<span class="release" style="text-transform:lowercase;"></span>)</a> <button class="sbtn sb-fill-top">GIVE US A STAR (<span class="stargazers" style="text-transform: lowercase;"></span>)</button>
</a>
<a href="https://github.com/teaxyz/cli" class="ps-0 pe-0 btn-div" id="btn-div" >
<button class="sbtn sb-fill-top">INSTALL TEA (<span class="release" style="text-transform: lowercase;"></span>)</button>
</a>
</div> </div>
<hr> <hr>
<style> <style>
.split-btn{
display: inline-block; .btn-div{
width: 50%; width: 50%;
border-left: 2px solid #949494;
} }
.split-right{ #btn-div{
border-left: 0px !important; border-right: 2px solid #949494;
}
.sbtn {
font-family: "pp-neue-machina";
background-color: #1a1a1a;
position: relative;
box-sizing: border-box;
height: 8.8vw !important;
display: inline-block;
overflow: hidden;
width: 100%;
text-align: center;
border: none;
text-decoration: none;
color: rgb(225, 225, 225);
white-space: nowrap;
z-index: 0;
}
.sb-fill-top::before {
position: absolute;
content: "";
background: rgb(6, 255, 208);
transition-duration: 0.2s;
z-index: -1;
inset: auto auto 0px 0px;
width: 100%;
height: 0px;
opacity: 1;
}
.sb-fill-top:hover::before {
width: 100%;
height: 100%;
opacity: 1;
}
.sb-fill-top:hover {
color: rgb(10, 5, 5);
background: rgb(255, 255, 255);
transition: color 0.2s ease 0s, background 0s ease 0.3s;
} }
</style> </style>

54
src/static/css/navbar.css
View file

@ -7,60 +7,6 @@
@media only screen and (min-width: 1200px) { @media only screen and (min-width: 1200px) {
/* Menu CTA */
.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(225, 225, 225);
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.2s;
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;
}
/* End Menu CTA */
div.container-fluid.top-nav{ div.container-fluid.top-nav{
padding-left: 0px !important; padding-left: 0px !important;
padding-right: 0px !important; padding-right: 0px !important;