Lynob Lynob - 4 months ago 20
CSS Question

CSS: round buttons with shadow effect

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

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;
}
<a href="contact.html" class="navButton">Contact</a>