アプリ魂

はじめてのプログラミング生活

【129日目】ボタンを作ってみた#3

f:id:seitokaii:20170130052458p:plain

@appdamacyですペコリ(o_ _)o))

今日はグラデーションのかかったボタンを作ってみました。マウスホバーすることでグラデーションが右から左へと移動します。あらかじめ大きめのグラデーションを用意してはみ出した部分を「overflow:hidden」で隠しています。

このボタンを作っているあいだに絶対位置と相対位置、疑似要素の使い方をマスターできた気がします。やっぱりコードは一行ずつ試しながら書いていくと理解しやすいですね。今後もアイデアをひっぱりだして面白いボタンを作っていきたいです。

RESULT

f:id:seitokaii:20170130055443p:plain

f:id:seitokaii:20170130055452g:plain

HTML

CSS

2016 APPDAMACY