賢威7のコメントフォームボタンを立体的にする方法

スクリーンショット 2016-03-11 15.02.28

 

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

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

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

スクリーンショット 2016-03-11 15.00.55

 

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

まずは下記のコードを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;
}

 

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

 

スクリーンショット 2016-03-11 15.00.28

 

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

 

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

副業から月収10万円以上を安定的に稼ぐ力を身につける無料メルマガ講座

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-10-16-37-15

一緒にビジネスや遊びを全力でシェアしよう!お気軽に申請どうぞ!

スクリーンショット 2016-08-17 0.43.46

コメントを残す

自己紹介・挨拶がないコメントに関しては返答を控えさせて頂きます。
サブコンテンツ

一緒にビジネスや遊びを全力でシェアしよう!お気軽に申請どうぞ!

スクリーンショット 2016-08-17 0.43.46

キラの公式LINE@

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-29-7-40-42

このページの先頭へ