我試圖複製導航按鈕here,這是一個wix網站,因此很難檢查元素。CSS:帶陰影效果的圓形按鈕
我試圖在這裏
https://jsfiddle.net/1vngy4uo/1/
我想很多變化,從來沒有得到CSS 100%正確。
.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;
}
和HTML
<a href="contact.html" class="navButton">
<span class="bg"></span>
<span class="text">Contact</span>
https://jsfiddle.net/rum5mtnw/ –
https://jsfiddle.net/9L60y8c6/2/ –
網站生成的地點並不重要 - 檢查網站的元素是一樣的。你總是可以期待有一個應用了CSS的HTML元素。在您引用的網站中,他們使用的是背景圖片和其他CSS - 通過檢查它很容易看到。 –