CSS: round buttons with shadow effect - css

Question

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>

Answer 1

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

Answer 2

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;
}

Answer 3

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>