ログイン
問題3

両サイドから閉まるボタン

アイコン画像

問題3:両サイドから閉まるボタン

今回はシンプルだけどおしゃれなボタンを作っていきましょう!

エディターのアイコンあらかじめエディタに書くコード

                <div class="btn">ここをクリック</div>
¥HTML¥
              
                .btn{
  width: 200px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  border:2px solid #333333;
  color: #333333;
  cursor: pointer;
}
¥CSS¥
              

ブラウザのアイコン期待する画面


タグアイコン解答ソースコード

              .btn{
  transition: .5s;
}
.btn:hover{
  color: white;
  box-shadow:inset -100px 0 0 #333333,inset 100px 0 0 #333333;
}
¥CSS¥
            

コメントのアイコン解説

今回はbox-shadowを使うことによって簡単にサイドから要素が出てきたかのように見えるアニメーションを作りました。box-shadowにinsetを効かせることで内側に影を持ってくることができます。あとは簡単で両サイドから要素の半分の長さだけ伸ばしてくれば完成です。
ログインして解答を見る
完了にする!
twitterのアイコン
活動記録をTweetする
LINEの友達追加でお役立ち動画をGET!!
LINEの友達追加でお役立ち動画をGET!!

閉じる