I have no idea why the transition is not being applied for an the animation of a hamburger menu.
I have tried to isolate the issue of why the transition is not being applied but I cannot see why.
#media only screen and (max-width: 763px) {
.menu-btn {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 60px;
height: 60px;
transition: all .5s ease-in-out;
}
.menu-btn-burger {
width: 50px;
height: 6px;
background: #fff;
border-radius: 5px;
box-shadow: 0px 2px 5px rgba(255, 101, 47, .2);
cursor: pointer;
transition: all .5 ease-in-out;
}
.menu-btn-burger::before,
.menu-btn-burger::after {
content: '';
position: absolute;
width: 50px;
height: 6px;
background: #fff;
border-radius: 5px;
box-shadow: 0px 2px 5px rgba(255, 101, 47, .2);
transition: all 0.5 ease-in-out;
}
.menu-btn-burger::before {
transform: translateY(-16px);
}
.menu-btn-burger::after {
transform: translateY(16px);
}
/* ANIMATION */
.menu-btn.open .menu-btn-burger {
transform: translateX(-50px);
background: transparent;
box-shadow: none;
}
.menu-btn.open .menu-btn-burger::before {
transform: rotate(45deg) translate(35px, -35px);
}
.menu-btn.open .menu-btn-burger::after {
transform: rotate(-45deg) translate(35px, 35px);
}
<nav>
<a href=# onclick="openMenu()" class="icon">
<div class="menu-btn">
<div class="menu-btn-burger">
</div>
</div>
</a>
</nav>
Related
I'm trying to have a round border around my radio button fade in upon hover. The issue I'm facing is the hover border is being painted on the inside of the button as well as the outside. I'd only like the border on the outside. Additionally, the fade in transition is not working. Some advice appreciated. Thank you.
input[type='radio'] {
width: 20px;
height: 20px;
border: 2px solid #747474;
border-radius: 50%;
outline: none;
opacity: 0.6;
transition: 0.3s;
}
input[type='radio']:hover:before {
box-shadow: 0px 0px 0px 12px rgba(80, 80, 200, 0.2);
border-radius: 50%;
opacity: 1;
}
input[type='radio']:before {
content: '';
display: block;
width: 60%;
height: 60%;
margin: 20% auto;
border-radius: 50%;
}
input[type='radio']:checked:before {
background: green;
}
<input type="radio">
You can check this code snippet with some explanation
input[type='radio'] {
width: 20px;
height: 20px;
border: 2px solid #747474;
border-radius: 50%;
outline: none;
opacity: 0.6;
/*transition: 0.3s;*/
}
input[type='radio']:hover:before {
box-shadow: 0px 0px 0px 12px rgba(80, 80, 200, 0.2);
border-radius: 50%;
opacity: 1;
}
input[type='radio']:before {
content: '';
display: block;
width: 60%;
height: 60%;
margin: 10%; /* Keeping margin only 10% */
padding: 10%; /* Increase the inner area for pushing the border out of the circle */
border-radius: 50%;
transition: 0.3s; /* Move your transition to here */
}
input[type='radio']:checked:before {
background: green;
}
<input type="radio">
Transition in before
input[type='radio'] {
width: 20px;
height: 20px;
border: 2px solid #747474;
border-radius: 50%;
outline: none;
opacity: 0.6;
}
input[type='radio']:hover:before {
box-shadow: 0px 0px 0px 12px rgba(80, 80, 200, 0.2);
border-radius: 50%;
opacity: 1;
}
input[type='radio']:before {
content: '';
display: block;
width: 60%;
height: 60%;
margin: 20% auto;
border-radius: 50%;
transition: 0.3s;
}
input[type='radio']:checked:before {
background: green;
}
<input type="radio">
I find it a bit hacky solution,
it might help.
input[type='radio'] {
width: 20px;
height: 20px;
border: 2px solid #747474;
border-radius: 50%;
outline: none;
opacity: 0.6;
transition: 0.3s;
}
input[type='radio']:hover:before {
box-shadow: 0px 0px 0px 12px rgba(80, 80, 200, 0.2);
border-radius: 50%;
opacity: 1;
}
input[type='radio']:before {
content: '';
display: block;
width: 100%;
height: 100%;
border-radius: 50%;
}
input[type='radio']:checked:before {
background: green;
}
<input type="radio">
added animation and also the hover border is now outside only
input[type='radio'] {
/* add margin here of If you want */
width: 20px;
height: 20px;
border: 2px solid #747474;
border-radius: 50%;
outline: none;
opacity: 0.6;
transition: 0.3s;
}
input[type='radio']:hover:before {
box-shadow: 0px 0px 0px 12px rgba(80, 80, 200, 0.2); /* control thickens on border here */
border-radius: 50%;
opacity: 1;
}
input[type='radio']:before {
content: '';
display: block;
width: 100%; /* outside border*/
height: 100%; /* for outside border */
border-radius: 50%;
transition:.3s; /* for animation*/
}
input[type='radio']:checked:before {
background: green;
}
<input type="radio">
I'm trying to recreate my form's checkboxes by CSS3.
I animated the mark (checkbox) correctly, but when I uncheck the checkbox I can't start the animation in reverse mode. I reproduced my example.
/*
==================
INPUT CHECKBOX
==================
*/
.checkbox-label>input {
display: none;
outline: none;
}
/*
==============
LABEL CHECKBOX
==============
*/
.checkbox-label {
display: block;
position: relative;
font-size: 0.95em;
margin-bottom: 10px;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
outline: none;
}
.checkbox-label:hover>.checkbox-button {
box-shadow: 0px 0px 0px 5px hsla(255, 100%, 60%, 0.1);
background-color: hsla(255, 100%, 60%, 0.1);
}
.checkbox-label:hover>.checkbox-button {
border: 2px solid #808080;
}
/*
======================
MARK CHECKBOX - AFTER
======================
*/
.checkbox-label>input[type="checkbox"]~.checkbox-button::after {
content: "";
position: absolute;
top: 8px;
left: 3px;
border-right: 2px solid transparent;
border-bottom: 2px solid transparent;
transform: rotate(45deg);
transform-origin: left bottom;
}
/*
================================
MARK CHECKBOX - AFTER - CHECKED
================================
*/
.checkbox-label>input[type="checkbox"]:checked~.checkbox-button::after {
animation: checkbox-check 0.3s cubic-bezier(0.5, 0, 0.23, 1);
animation-fill-mode: forwards;
animation-direction: normal;
}
.checkbox-label:not(:active)>input[type="checkbox"]:not(:checked)~.checkbox-button::after {
animation-direction: reverse;
}
/*
========
CHECKBOX
========
*/
.checkbox-button {
vertical-align: sub;
}
.checkbox-button {
position: relative;
top: 0px;
left: 0px;
color: #808080;
height: 20px;
width: 20px;
background-color: transparent;
border: 2px solid #ccc;
border-radius: 5px;
display: inline-block;
transition: background-color 0.4s ease;
}
.checkbox-label>input:checked~.checkbox-button {
background-color: transparent;
border: 2px solid #6633ff;
background-color: #6633ff;
}
.checkbox-label>input~.checkbox-button::before {
content: "";
position: absolute;
left: -8px;
top: -8px;
width: 35px;
height: 35px;
background-color: #6633ff;
border-radius: 30%;
opacity: 0.6;
transform: scale(0);
}
.checkbox-label>input:checked~.checkbox-button::before {
animation: ripple 0.9s ease-out;
}
/*
==========
ANIMATION
==========
*/
#keyframes ripple {
0% {
transform: scale(0);
}
50% {
transform: scale(1);
}
100% {
opacity: 0;
transform: scale(1);
}
}
#keyframes checkbox-check {
0% {
width: 0px;
height: 0px;
border-color: white;
transform: translate3d(0, 0, 0) rotate(45deg);
}
33% {
width: 5px;
height: 0px;
transform: translate3d(0, 0px, 0) rotate(45deg);
}
100% {
width: 5px;
height: 11px;
border-color: white;
transform: translate3d(0, -11px, 0) rotate(45deg);
}
}
<form action="" method="post" class="form">
<h1>Custom Checkboxe</h1>
<label class="checkbox-label" data-label="One">
<input type="checkbox" checked="checked" />
<span class="checkbox-button"></span>
One
</label>
</form>
Let me know what I'm doing wrong and how to improve to make my animation work properly.
I have an issue but can't find where I made a mistake...
I made an little animation using transform in CSS as you can see on the code.
But sometimes when I hover the mouse the animation becomes crazy. I feel like it occurs often when I hover from bottom left to right.Wonder is you can see it.
Can you help me fix it please ?
*{
box-sizing: border-box;
}
body{
margin: 0;
padding: 0;
background: #ccc;
}
.container{
width: 400px;
margin: 0 auto;
margin-top: 200px;
position: relative;
}
.carre{
float: right;
width: 200px;
height: 300px;
position: relative;
background-color: #63aace;
border: 3px solid #f9f9f9;
border-radius: 10px;
transform-style: preserve-3d;
transition: all ease 1s;
box-shadow: 0px 0px 20px rgba(0,0,0,.5);
}
.carre__front{
position: absolute;
width: 180px;
height: 200px;
left: 7px;
top: 50px;
border: 2px solid #f9f9f9;
border-radius: 10px;
background: #c65d5d;
transform-style: preserve-3d;
transition: all ease 1s;
transform: scale(1);
opacity: .9;
}
.carre__tippy{
position: absolute;
width: 100px;
height: 60px;
left: 47px;
bottom: 70px;
border: 2px solid #f9f9f9;
border-radius: 10px;
background: rgba(255,255,255,.2);
transform-style: preserve-3d;
transition: all ease 1s;
opacity: .9;
}
.description{
position: absolute;
top: 100px;
left: 0px;
font-family: sans-serif;
color: #fff;
font-size: 16px;
opacity: .9;
text-transform: uppercase;
}
.carre:hover{
transform: perspective(1000px) rotateX(30deg) rotateY(20deg) rotateZ(-20deg) translateX(0) translateY(0) translateZ(100px);
box-shadow: -100px 100px 100px rgba(0,0,0,.3);
}
.carre:hover .carre__front{
transform: translateZ(50px);
box-shadow: -20px 20px 30px rgba(0,0,0,.3);
opacity: .7;
}
.carre:hover .carre__tippy{
transform: perspective(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateZ(120px);
box-shadow: -50px 50px 20px rgba(0,0,0,.3);
}
p{
margin: 0;
padding: 0;
}
<!DOCTYPE html>
<html lang="fr">
<head>
<!-- En-tête de la page -->
<meta charset="utf-8" />
<title>titre</title>
</head>
<body>
<div class="container">
<div class="carre">
<div class="carre__front">
</div>
<div class="carre__tippy">
</div>
</div>
<div class="description"><p>Information display</p></div>
</div>
</body>
</html>
It has to do with the perspective. You have to set it on the parent (so perspective: 1000px; inside .container) and remove the others.
It might still 'flicker' a bit since it's transforming and calculating if your mouse is still hovering the element. (When it moves, the elements actually move out from underneath the mouse's position sometimes and then the :hover rules don't apply and the transforms reverse, coming back under the mouse triggering :hover, and so on..)
*{
box-sizing: border-box;
}
body{
margin: 0;
padding: 0;
background: #ccc;
}
.container{
width: 400px;
margin: 0 auto;
margin-top: 200px;
position: relative;
perspective: 1000px;
}
.carre{
float: right;
width: 200px;
height: 300px;
position: relative;
background-color: #63aace;
border: 3px solid #f9f9f9;
border-radius: 10px;
transform-style: preserve-3d;
transition: all ease 1s;
box-shadow: 0px 0px 20px rgba(0,0,0,.5);
}
.carre__front{
position: absolute;
width: 180px;
height: 200px;
left: 7px;
top: 50px;
border: 2px solid #f9f9f9;
border-radius: 10px;
background: #c65d5d;
transform-style: preserve-3d;
transition: all ease 1s;
transform: scale(1);
opacity: .9;
}
.carre__tippy{
position: absolute;
width: 100px;
height: 60px;
left: 47px;
bottom: 70px;
border: 2px solid #f9f9f9;
border-radius: 10px;
background: rgba(255,255,255,.2);
transform-style: preserve-3d;
transition: all ease 1s;
opacity: .9;
}
.description{
position: absolute;
top: 100px;
left: 0px;
font-family: sans-serif;
color: #fff;
font-size: 16px;
opacity: .9;
text-transform: uppercase;
}
.carre:hover{
transform: rotateX(30deg) rotateY(20deg) rotateZ(-20deg) translateX(0) translateY(0) translateZ(100px);
box-shadow: -100px 100px 100px rgba(0,0,0,.3);
}
.carre:hover .carre__front{
transform: translateZ(50px);
box-shadow: -20px 20px 30px rgba(0,0,0,.3);
opacity: .7;
}
.carre:hover .carre__tippy{
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateZ(120px);
box-shadow: -50px 50px 20px rgba(0,0,0,.3);
}
p{
margin: 0;
padding: 0;
}
<div class="container">
<div class="carre">
<div class="carre__front"></div>
<div class="carre__tippy"></div>
</div>
<div class="description"><p>Information display</p></div>
</div>
Remove perspective from all the transformations and place it on the container (not on hover).
"When defining the perspective property for an element, it is the CHILD elements that get the perspective view, NOT the element itself."
In your case the parent element is ".container" since you're applying some transformations to ".carre" too.
*{
box-sizing: border-box;
}
body{
margin: 0;
padding: 0;
background: #ccc;
}
.container{
width: 400px;
margin: 0 auto;
margin-top: 200px;
position: relative;
perspective: 1000px;
}
.carre{
float: right;
width: 200px;
height: 300px;
position: relative;
background-color: #63aace;
border: 3px solid #f9f9f9;
border-radius: 10px;
transform-style: preserve-3d;
transition: all ease 1s;
box-shadow: 0px 0px 20px rgba(0,0,0,.5);
}
.carre__front{
position: absolute;
width: 180px;
height: 200px;
left: 7px;
top: 50px;
border: 2px solid #f9f9f9;
border-radius: 10px;
background: #c65d5d;
transform-style: preserve-3d;
transition: all ease 1s;
transform: scale(1);
opacity: .9;
}
.carre__tippy{
position: absolute;
width: 100px;
height: 60px;
left: 47px;
bottom: 70px;
border: 2px solid #f9f9f9;
border-radius: 10px;
background: rgba(255,255,255,.2);
transform-style: preserve-3d;
transition: all ease 1s;
opacity: .9;
}
.description{
position: absolute;
top: 100px;
left: 0px;
font-family: sans-serif;
color: #fff;
font-size: 16px;
opacity: .9;
text-transform: uppercase;
}
.carre:hover{
transform: rotateX(30deg) rotateY(20deg) rotateZ(-20deg) translateX(0) translateY(0) translateZ(100px);
box-shadow: -100px 100px 100px rgba(0,0,0,.3);
}
.carre:hover .carre__front{
transform: translateZ(50px);
box-shadow: -20px 20px 30px rgba(0,0,0,.3);
opacity: .7;
}
.carre:hover .carre__tippy{
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateZ(120px);
box-shadow: -50px 50px 20px rgba(0,0,0,.3);
}
p{
margin: 0;
padding: 0;
}
<!DOCTYPE html>
<html lang="fr">
<head>
<!-- En-tête de la page -->
<meta charset="utf-8" />
<title>titre</title>
</head>
<body>
<div class="container">
<div class="carre">
<div class="carre__front">
</div>
<div class="carre__tippy">
</div>
</div>
<div class="description"><p>Information display</p></div>
</div>
</body>
</html>
Remove all your perspective out of the :hover in css. It'll work.
.carre:hover{
transform: rotateX(30deg) rotateY(20deg) rotateZ(-20deg) translateX(0)
translateY(0) translateZ(100px);
box-shadow: -100px 100px 100px rgba(0,0,0,.3);
.carre__tippy{
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateZ(120px);
box-shadow: -50px 50px 20px rgba(0,0,0,.3);
}
.carre__front{
transform: translateZ(50px);
box-shadow: -20px 20px 30px rgba(0,0,0,.3);
opacity: .7;
}
}
Here I nested all your css together for track keeping a little easier
Edit: I meant SCSS file not CSS.
My first tab longer than second one. In first tab there are links and images with anchor link.The problem is first tab's links are still active although I click on second tab and lays down on my tag cloud, so prevent them to be clickable. I would like to know why links of first tab are still clickable althoug they are not appearing?
fiddle
HTML
<section class="tabs">
<input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked" />
<label for="tab-1" class="tab-label-1">About</label>
<input id="tab-2" type="radio" name="radio-set" class="tab-selector-2" />
<label for="tab-2" class="tab-label-2">Services</label>
<input id="tab-3" type="radio" name="radio-set" class="tab-selector-3" />
<label for="tab-3" class="tab-label-3">Work</label>
<div class="clear-shadow"></div>
<div class="tab-content">
<div class="content-1">
Link
<a href="#" class="tab-thumb thumbnail" rel="bookmark" title="testing editor styles">
<img src="#" width="250" height="250"/></a>
Link
<a href="#" class="tab-thumb thumbnail" rel="bookmark" title="testing editor styles">
<img src="#" width="250" height="250"/></a>
Link
<a href="#" class="tab-thumb thumbnail" rel="bookmark" title="testing editor styles">
<img src="#" width="250" height="250"/></a>
Link
<a href="#" class="tab-thumb thumbnail" rel="bookmark" title="testing editor styles">
<img src="#" width="250" height="250"/></a>
</div>
<div class="content-2">
<h2>Most Commented</h2>
</div>
</div>
</section>
Link
CSS
.tabs {
position: relative;
margin: 40px auto;
width: 100%;
height: auto;
}
.tabs input {
position: absolute;
z-index: 1000;
width: 100px;
height: 40px;
left: 0px;
top: 0px;
opacity: 0;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
cursor: pointer;
}
.tabs input#tab-2{
left: 100px;
}
.tabs input#tab-3{
left: 220px;
}
.tabs input#tab-4{
left: 340px;
}
.tabs label {
background: #5ba4a4;
background: -moz-linear-gradient(top, #5ba4a4 0%, #4e8c8a 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5ba4a4), color-stop(100%,#4e8c8a));
background: -webkit-linear-gradient(top, #5ba4a4 0%,#4e8c8a 100%);
background: -o-linear-gradient(top, #5ba4a4 0%,#4e8c8a 100%);
background: -ms-linear-gradient(top, #5ba4a4 0%,#4e8c8a 100%);
background: linear-gradient(top, #5ba4a4 0%,#4e8c8a 100%);
font-size: 15px;
line-height: 40px;
height: 40px;
position: relative;
padding: 0 12px;
float: left;
display: block;
width: 80px;
color: #385c5b;
letter-spacing: 1px;
text-transform: uppercase;
font-weight: bold;
text-align: center;
text-shadow: 1px 1px 1px rgba(255,255,255,0.3);
border-radius: 3px 3px 0 0;
box-shadow: 2px 0 2px rgba(0,0,0,0.1), -2px 0 2px rgba(0,0,0,0.1);
}
.tabs label:after {
content: '';
background: #fff;
position: absolute;
bottom: -2px;
left: 0;
width: 100%;
height: 2px;
display: block;
}
.tabs input:hover + label {
background: #5ba4a4;
}
.tabs label:first-of-type {
z-index: 4;
box-shadow: 2px 0 2px rgba(0,0,0,0.1);
}
.tab-label-2 {
z-index: 3;
}
.tab-label-3 {
z-index: 2;
}
.tabs input:checked + label {
background: #fff;
z-index: 6;
}
.clear-shadow {
clear: both;
}
.tab-content {
background: #fff;
position: relative;
width: 100%;
height: auto;
z-index: 5;
box-shadow: 0 -2px 3px -2px rgba(0,0,0,0.2), 0 2px 2px rgba(0,0,0,0.1);
border-radius: 0 3px 3px 3px;
}
.tab-content div {
position: absolute;
top: 0;
left: 0;
padding: 10px 40px;
z-index: 1;
opacity: 0;
-webkit-display: flex;
display: flex;
-webkit-flex-flow: column;
flex-flow: column;
-webkit-transition: opacity linear 0.1s;
-moz-transition: opacity linear 0.1s;
-o-transition: opacity linear 0.1s;
-ms-transition: opacity linear 0.1s;
transition: opacity linear 0.1s;
}
.tab-content div img { border: 1px solid #903; position: relative;
}
.tabs input.tab-selector-1:checked ~ .tab-content .content-1,
.tabs input.tab-selector-2:checked ~ .tab-content .content-2,
.tabs input.tab-selector-3:checked ~ .tab-content .content-3 {
z-index: 100;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-transition: opacity ease-out 0.2s 0.1s;
-moz-transition: opacity ease-out 0.2s 0.1s;
-o-transition: opacity ease-out 0.2s 0.1s;
-ms-transition: opacity ease-out 0.2s 0.1s;
transition: opacity ease-out 0.2s 0.1s;
position:relative;
}
.tab-content div h2,
.tab-content div h3{
color: #398080;
}
.tab-content div p {
font-size: 14px;
line-height: 22px;
font-style: italic;
text-align: left;
margin: 0;
color: #777;
padding-left: 15px;
font-family: Cambria, Georgia, serif;
border-left: 8px solid rgba(63,148,148, 0.1);
}
.tab-content li {
overflow: hidden;
list-style: none;
border-bottom: 1px solid #f0f0f0;
margin: 0 0 8px;
padding: 0 0 6px;
}
Because opacity:0 does make your div transparent but it is still there. Change opacity:0 to display:none insteed
fiddle
I'm trying to replicate the navigation buttons here, that's a wix website so it's so hard to inspect elements.
What I have tried is here
https://jsfiddle.net/1vngy4uo/1/
I'm trying many variations, never getting the css 100% correct.
.navButton {
width:15%;
display:inline-block;
position:relative;
background-color:#03314b;
border-radius: 30%;
box-shadow: 2px 2px 2px #888888;
}
.navButton:hover {
background-color:#98b7c8;
}
.navButton span {
width:100%;
display:inline-block;
position:absolute;
border-radius: 30%;
box-shadow: 2px 2px 2px #888888;
}
.navButton .bg {
height:50%;
top:0;
background-color:#3a6076 ;
border-radius: 30%;
box-shadow: 2px 2px 2px #888888;
}
.navButton:hover .bg{
background-color:#afcad9;
}
.navButton .text {
position:relative;
text-align:center;
color:#fff;
vertical-align: middle;
align-items: center;
}
.navButton .text:hover {
color:#000000;
}
and html
<a href="contact.html" class="navButton">
<span class="bg"></span>
<span class="text">Contact</span>
A very similar one, using linear-gradient and less HTML markup
jsFiddle
.navButton {
color: white;
text-decoration: none;
font-family: Helvetica, Arial, sans-serif;
font-size: 14px;
text-align: center;
padding: 0 30px;
line-height: 30px;
display: inline-block;
position: relative;
border-radius: 20px;
background-image: linear-gradient(#335b71 45%, #03324c 55%);
box-shadow: 0 2px 2px #888888;
transition: color 0.3s, background-image 0.5s, ease-in-out;
}
.navButton:hover {
background-image: linear-gradient(#b1ccda 49%, #96b4c5 51%);
color: #03324c;
}
Contact
I just used a div element to implement the same button that you referred. Is this what you want?
https://jsfiddle.net/9L60y8c6/
<div class="test">
</div>
.test {
cursor: pointer;
background: rgba(4, 53, 81, 1) url(//static.parastorage.com/services/skins/2.1212.0/images/wysiwyg/core/themes/base/shiny1button_bg.png) center center repeat-x;
border-radius: 10px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
transition: background-color 0.4s ease 0s;
position: absolute;
top: 0;
bottom: 0;
left: 5px;
right: 5px;
height: 30px;
width: 115px;
}
Would this be a start? You might want to adjust the colors a little.
Note: One can use linear-gradient, though it won't work on IE9, so I use a pseudo instead
.navButton {
width: 15%;
display: inline-block;
position: relative;
background-color: #03314b;
border-radius: 8px;
box-shadow: 2px 2px 2px #888888;
text-align: center;
text-decoration: none;
color: #fff;
padding: 5px;
transition: all 0.3s;
overflow: hidden;
}
.navButton:before {
content: '';
position: absolute;
top: 0;
left: 0;
height: 50%;
width: 100%;
background-color: #335b71;
transition: all 0.3s;
}
.navButton span {
position: relative;
}
.navButton:hover {
transition: all 0.3s;
background-color: #96b4c5;
color: black;
}
.navButton:hover:before {
transition: all 0.3s;
background-color: #b1ccda;
}
<a href="contact.html" class="navButton">
<span>Contact</span>
</a>