.button01{ display:block; width: 250px; height:70px; line-height: 70px; color: #FFF; text-decoration: none; text-align: center; background-color: #f39800; /*ボタン色*/ border-radius: 5px; /*角丸*/ -webkit-transition: all 0.5s; transition: all 0.5s; } .button01:hover{ background-color: #f9c500; /*ボタン色*/ }
![CSSボタンのデザインとホバーエフェクトのアイデア](https://cdn-ak-scissors.b.st-hatena.com/image/square/c60db9c480ab1c51f065f1eeadaab7c08ebe2180/height=288;version=1;width=512/https%3A%2F%2Fdesign.webclips.jp%2Fwp-content%2Fuploads%2F20221108_01.jpg)