今回ご紹介するのは賢威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;
}
すると変更後は以下のようになります。
今回はボタンの色を緑にしていますが、自由にカスタマイズしてみてください！
最新情報をお届けします
この記事へのコメントはありません。