[cssbuttons.io]はボタンデザインを簡単に作成できるオンラインツールを提供しています。
このツールを使うと、様々なボタンデザインを簡単にカスタマイズできます。
選んだデザインを選択し、HTMLとCSSコードをコピーするだけで、ボタンデザインをすぐにウェブサイトに追加できます。
実際に試してみたい場合は、こちらのリンクからアクセスできます。
使い方
サイトにあるボタンをホバーすると、[Get code]と言う文字が現れるので、そちらのリンクに移動します
リンク先に、HTMLコードとCSSコードがありますのでそちらをコピペすれば完成です
文字や大きさなどは各自調整は必要となります
おそらくwordpressなど使っていると、テーマで入っているCSSの影響でそのままでは思ったとおりにデザインが表示されません
開発者ツールなど開いて各自微調整しましょう。
例えば：下記サンプルの一つ目は私の環境では「margin-bottom: 0px;」「inset: 7px;」を「0px」に変更でうまくデザインされました。
下記サンプルの二つ目は私の環境下では「z-index: 0;」を入れないとうまくデザインされなかったです。
下記が実装サンプルになります
![[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]](https://hbb.afl.rakuten.co.jp/hgb/0fb3a2a7.a3eac612.0fb3a2a8.1146eb94/?me_id=1213310&item_id=21161259&pc=https%3A%2F%2Fthumbnail.image.rakuten.co.jp%2F%400_mall%2Fbook%2Fcabinet%2F8469%2F9784815618469_1_5.jpg%3F_ex%3D400x400&s=400x400&t=picttext "[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]")
