2017-04-21 139 views
-1

好了,所以我一直在考慮重建這個按鈕需要CSS3按鈕樣式

https://s27.postimg.org/7e1upkf4j/BUTTONS.png

使用HTML的這一部分的

<a href="#"> 
    Home <i class="material-icons ico-style">home</i> 
</a> 

我需要幫助,我因此失去了對任務漸變以及部分是否應該是方格陰影或嵌入邊框等。請您可以解釋答案

+0

你能不能讓我知道什麼是我的答案失蹤?這樣我就可以調整你接受。 – LGSon

回答

0

以下是對漸變部分的建議。 圖標您需要添加自己。

a { 
 
    position: relative; 
 
    display: inline-block; 
 
    width: 120px; 
 
    height: 50px; 
 
    line-height: 50px; 
 
    text-align: center; 
 
    border-radius: 25px; 
 
    border: 1px solid lightgray; 
 
    background: linear-gradient(#999,#fff); 
 
    text-decoration: none; 
 
} 
 

 
a::before { 
 
    content: ''; 
 
    position: absolute; 
 
    left: 9px; 
 
    top: 9px; 
 
    width: 100px; 
 
    height: 30px; 
 
    border-radius: 15px; 
 
    border: 1px solid gray; 
 
    background: white; 
 
} 
 

 
a span { 
 
    position: relative; 
 
}
<a href="#"> 
 
    <span>Home <i class="material-icons ico-style"></i></span> 
 
</a>