Better nav buttons
This commit is contained in:
parent
4fa39b3c5e
commit
625cffe55d
2 changed files with 110 additions and 24 deletions
|
@ -139,3 +139,110 @@
|
||||||
gap: 2rem;
|
gap: 2rem;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.custom-btn {
|
||||||
|
width: 130px;
|
||||||
|
height: 40px;
|
||||||
|
color: #4c4f69;
|
||||||
|
border-radius: 5px;
|
||||||
|
padding: 10px 25px;
|
||||||
|
font-family: 'Lato', sans-serif;
|
||||||
|
font-weight: 500;
|
||||||
|
background: transparent;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, .5),
|
||||||
|
7px 7px 20px 0px rgba(0, 0, 0, .1),
|
||||||
|
4px 4px 5px 0px rgba(0, 0, 0, .1);
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 8 */
|
||||||
|
.btn-1 {
|
||||||
|
background-color: #c6d0f5;
|
||||||
|
background-image: linear-gradient(315deg, #c6d0f5 0%, #fab387 74%);
|
||||||
|
line-height: 42px;
|
||||||
|
padding: 0;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-1 span {
|
||||||
|
position: relative;
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-1:before,
|
||||||
|
.btn-1:after {
|
||||||
|
position: absolute;
|
||||||
|
content: "";
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background: #fab387;
|
||||||
|
/*box-shadow: 4px 4px 6px 0 rgba(255,255,255,.5),
|
||||||
|
-4px -4px 6px 0 rgba(116, 125, 136, .2),
|
||||||
|
inset -4px -4px 6px 0 rgba(255,255,255,.5),
|
||||||
|
inset 4px 4px 6px 0 rgba(116, 125, 136, .3);*/
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-1:before {
|
||||||
|
height: 0%;
|
||||||
|
width: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-1:after {
|
||||||
|
width: 0%;
|
||||||
|
height: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-1:hover:before {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-1:hover:after {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-1:hover {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-1 span:hover {
|
||||||
|
color: #fab387;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-1 span:before,
|
||||||
|
.btn-1 span:after {
|
||||||
|
position: absolute;
|
||||||
|
content: "";
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
background: #fab387;
|
||||||
|
/*box-shadow: 4px 4px 6px 0 rgba(255,255,255,.5),
|
||||||
|
-4px -4px 6px 0 rgba(116, 125, 136, .2),
|
||||||
|
inset -4px -4px 6px 0 rgba(255,255,255,.5),
|
||||||
|
inset 4px 4px 6px 0 rgba(116, 125, 136, .3);*/
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-1 span:before {
|
||||||
|
width: 2px;
|
||||||
|
height: 0%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-1 span:after {
|
||||||
|
height: 2px;
|
||||||
|
width: 0%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-1 span:hover:before {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-1 span:hover:after {
|
||||||
|
width: 100%;
|
||||||
|
}
|
|
@ -3,32 +3,11 @@
|
||||||
|
|
||||||
<center>
|
<center>
|
||||||
<nav class="navbar" role="navigation" aria-label="main navigation">
|
<nav class="navbar" role="navigation" aria-label="main navigation">
|
||||||
<div class="navbar-brand">
|
|
||||||
<a
|
|
||||||
role="button"
|
|
||||||
class="navbar-burger"
|
|
||||||
data-target="navMenu"
|
|
||||||
aria-label="menu"
|
|
||||||
aria-expanded="false"
|
|
||||||
>
|
|
||||||
<span aria-hidden="true"></span>
|
|
||||||
<span aria-hidden="true"></span>
|
|
||||||
<span aria-hidden="true"></span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div class="navbar-menu" id="navMenu">
|
<div class="navbar-menu" id="navMenu">
|
||||||
<div class="navbar-start">
|
<div class="navbar-start">
|
||||||
<a class="navbar-item" href="/">
|
<button class="custom-btn btn-1" type="button" onclick="location.href='/'" ><span>LimePot</span></button>
|
||||||
<span class="text-gradient">LimePot</span>
|
<button class="custom-btn btn-1" type="button" onclick="location.href='/projects'" ><span>Projects</span></button>
|
||||||
</a>
|
<button class="custom-btn btn-1" type="button" onclick="location.href='/blog'" ><span>Blog</span></button>
|
||||||
|
|
||||||
<a class="navbar-item" href="/projects">
|
|
||||||
<span class="text-gradient">Projects</span>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<a class="navbar-item" href="/blog">
|
|
||||||
<span class="text-gradient">Blog</span>
|
|
||||||
</a>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
Loading…
Reference in a new issue