今回ご紹介するのは賢威7の記事のコメントフォームの投稿ボタンを立体的にする方法です。
⇩賢威についての詳しい情報は下記から⇩
賢威公式サイト
 

コメント送信ボタンを立体的に！

デフォルトの状態だと下記のような感じです。

これをカラフルにして立体的にしていこうと思います。

まずは下記のコードをbase.cssに追記してください。

.btn-form01 {
border-radius: 4px;
padding: 10px 15px;
background: #52a66a;
box-shadow: 0 5px 0 #428b57;
}
.btn-form01:hover {
background: #428b57;
-webkit-transform: translate3d(0px,5px,1px);
-moz-transform: translate3d(0px,5px,1px);
transform: translate3d(0px,5px,1px);
box-shadow: none;
}

すると変更後は以下のようになります。

今回はボタンの色を緑にしていますが、自由にカスタマイズしてみてください！

 
⇒賢威7カスタマイズ大図鑑へ戻る