HTML&CSS

HTMLのみで設置できるボタン一覧(CSS不要!)

HTMLのみで設置できるボタン一覧_00266

こんにちは!タナトスです!

今回は、コピペで使えるボタン一覧を作成しました😉

ただのボタン一覧ではありませんよ💡

ボタンを作る時私は思ったんです。

HTMLとCSS組むのめんどくさいな・・

なんとか作業効率を上げられないかなと思い色々調べました。

その結果・・

HTMLのみでボタンの装飾からホバー機能まで実装できるではないか!!😳

ということが分かったんです!

その後、ネットでかき集めた情報で試行錯誤し、ようやくの思いで作る事ができました😢
逆にかなりの時間を費やしたような・・

この頑張りを私一人で止めるのは勿体無いと思ったので開示しようと思います✨

コードの使い方は別記事にて簡単ではありますがまとめる予定です🚀

注意
  • 携帯で見る時
  • ホバーはPCのみなので携帯では機能しません🙇‍♂️携帯の人はタップした時に少し薄くなるぐらいです。ボタンとしての機能は働きます💡

  • 編集する時
  • 動作確認はHTMLのみで実装するのでプレビューでは動きません。面倒ですが、「公開」して動作確認をしてください💡
    プラウザによっては機能しないこともあります。悪しからず💡

白くなるボタン

 

携帯の人は横にスクロールできます!


 

 

携帯の人は横にスクロールできます!


 

 

携帯の人は横にスクロールできます!


 

 

携帯の人は横にスクロールできます!


 

 

携帯の人は横にスクロールできます!

 

黒くなるボタン

 

携帯の人は横にスクロールできます!


 

 

携帯の人は横にスクロールできます!


 

 

携帯の人は横にスクロールできます!


 

 

携帯の人は横にスクロールできます!


 

 

携帯の人は横にスクロールできます!

 

まとめ

以上、速攻で使えるHTMLのみで実装できるボタン一覧でした😄

とはいえ、CSSを触れられた方がデザインの幅は広がるので使えるようにしてた方がオススメです💡

おすすめの参考サイトは「サルワカ」さんの
CSSで作る!押したくなるボタンデザイン100」です✨

もしこの記事が役に立ったらブックマークしてくれたら嬉しいです🤗