みかづきブログ その3

3ヶ月つづけてみました。

CSSでボタンをつくろう。


HTML

<div class="btn">
    <div class="inner">BUTTON</div>
</div>

CSS

.btn {
    margin: 20px 10px; 
}

.inner {
    display: inline-block;
    padding: 20px 30px;
    border-bottom: solid #333 4px;
    border-radius: 12px;
    color: #eee;
    cursor: pointer;
    background: #666;
    text-decoration: none;
}

.inner:hover {
    margin-top: 4px;
    border: none;
}

最近はいつもこんな感じでつくってます。