がOK CSS3ボタンのスタイリング

Question

が必要ですので、私は私がそうで失われたよ助けを必要とHTML

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

のこのセクションを使用して

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

このボタンを再作成するタスクを与えられてきましたグラデーションと部品がボックスシャドウかインセットボーダーかどうかなどを入力してください。答えを説明してください。

Answer 1

ここにグラデーションパーツの提案があります。 アイコン自分で追加する必要があります。

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>