恵比寿のWebサイト制作・Webデザインチームのブログ。Webデザインやコーディング、SEO対策まで幅広く手掛けています。

恵比寿のデザイン制作チームのブログです。

Webデザイン、
Web制作、
SEO対策の
ご依頼・ご相談

Contact

CSSだけでくるっと回転するボタンの作成

投稿日:2018-03-20 更新日:




css_roll_button-1
今回はCSSだけでくるりと奥に回転するボタンの作成を紹介します。

 

まずHTMLのコードを記述していきます。


 <ul class="menu">
  <li class="btn-list1"><a href="#">Home</a></li>
  <li class="btn-list2"><a href="#">Profile</a></li>
  <li class="btn-list3"><a href="#">Work</a></li>
 </ul>

次に、CSSです。


.btn-list1 a{background-color:#87ceeb;}
.btn-list2 a{background-color:#b686eb;}
.btn-list3 a{background-color:#eb86a6;}

.menu{
 list-style-type: none;
 height: 100px;
}

.menu li{
 float:left;
 margin-right: 20px;
 text-align: center;
 transition: all 0.5s ease;
}

.menu li:hover{
 transform: scaleX(-1);
}

.menu li a{
 display: inline-block;
 width: 100px;
 height: 100px;
 line-height: 100px;
 border-radius:50px;
 color: #fff;
 text-align: center;
}

3つのボタンができました。 カーソルを合わせるとそれぞれ水平方向にくるりと回転します。

roll_button1

roll_button2

カーソルと離すと水平方向に反転し、元に戻ります。
余談ですがtransform:scaleY(-1)にすると垂直方向に回転します。

 

Javascriptに比べるとCSSでのアニメーションには限界はありますが、動作は非常に軽いので
CSSでこなせる部分は是非活用していきましょう。




この記事をシェアする

  • Twitter
  • Facebook
  • BookmarkB!
  • Pocket

Related Entries

この記事を書いた人

TOM

TOM

Webデザイナー、UI/UXデザインと共にJavascript、PHP等のプログラミング言語について日々勉強中。