webでボタンにhoverアニメーションをつける方法

# 目次
1. はじめに
2. 動作ごとにskinを設定
3. Custom CSSの説明
4. Custom CSSの設定
5. あとがき
6. 参照

# 1. はじめに
Konyではボタンの様々な動作に背景色、境界線、影などといったskinを定義することができます。
またテキストのフォントも指定することができます。

# 2. 動作ごとにskinを設定
まずはwebでボタンに`Nomal skin`と`Hover Skin`を設定してみます。
白色のボタンの上にマウスを持っていくとボタンが青色に変わるような表示を実装します。

1. 左の`project`から`Responsive web / Desktop`を選択
2. `Forms`から`New Form`を選択し、Formを追加
<img width="318" alt="スクリーンショット 2020-05-18 10.08.05.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/639588/8e47f531-eb77-854e-5019-57d7eaf3a239.png">

3. ボタンwidgetを追加
<img width="1396" alt="スクリーンショット 2020-05-18 10.12.54.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/639588/d2c198ea-789e-8aef-b48a-4cc6c7050310.png">

4. ボタンwidgetがクリックされた状態であることを確認し、右メニューの`skin`を選択

5. `skin`で以下のように設定

**Nomal skin**
`background` > `color` > `#3388d7`
`background` > `opacity` > `100%`

`Fonts` > `color` > `#FFFFFF`
`Fonts` > `opacity` > `100%`
`Fonts` > `size` > `150%`

**Hover skin**
`background` > `color` > `#FFFFFF`
`background` > `opacity` > `100%`

`Fonts` > `color` > `#3388d7`
`Fonts` > `opacity` > `100%`
`Fonts` > `size` > `150%`
※今回はFocusを使用しないため、Enableにチェックが入っていないことを確認してください。

`Product` > `Build` > `Responsive Webにチェック` > `Build` 
でビルドしてみてみましょう！

ボタンの位置にマウスを持っていくとボタンが青色に変わります。

<blockquote class="twitter-tweet"><p lang="und" dir="ltr"><a href="https://t.co/kYm7ERVnTv">pic.twitter.com/kYm7ERVnTv</a></p>&mdash; Kony (@Kony12763790) <a href="https://twitter.com/Kony12763790/status/1262297759425556480?ref_src=twsrc%5Etfw">May 18, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

変わりましたね！
widgetを選択し、`skin`タブからそれぞれの動作に応じてskinを定義するだけで
簡単に表示させることができます。
もちろんこちらでも全然良いのですが、もっとhoverしている感を表示してみたいと思います！

# 3. Custom CSSの説明
Konyでは様々な細かいskinの設定ができますが、さらに複雑な見た目や動きを表示させたい！となった時はCustom CSSを設定することで表示の幅を広げることが可能になります。

複雑な見た目や動きを設定したい場合はCustom CSSを設定してみましょう！
※ウィジェットにCSSコードを設定することができるのはWebのみとなります。

# 4. Custom CSSの設定
Responsive web上でwidgetを追加し、Custom cssを編集

1. ボタンwidgetがクリックされた状態であることを確認し、右メニューの`skin`を選択
2. `General`の`Custom CSS`にチェックを入れる
<img width="1393" alt="スクリーンショット 2020-05-18 10.15.29.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/639588/e5327f67-2a4e-a254-f48c-efa55147302f.png">
3. コードを記載

`skin`の`Nomal`に以下を設定
アニメーションの部分は`transition: .4s;`になります。
（今回はアニメーションの変化の始まりから終わりまでを4秒で設定しました。）


```sknBtnCSS.css
display: inline-block;
text-decoration: none;
background:#FFF;
color:#3388d7;
font-size: 100%;
border-radius: 3px;
transition: .4s;/*アニメーションを4秒で設定*/
font-weight: bold;
```

`skin`の`Hover`に以下を設定
（今回はFocusを使用しないため、Enableにチェックが入っていないことを確認してください。）

```sknBtnCSSHover.css
  background-color:#3388d7;
  border-color: #9cc2e5;
  color: #FFF;
```

`Product` > `Build` > `Responsive Webにチェック` > `Build` 

<blockquote class="twitter-tweet"><p lang="und" dir="ltr"><a href="https://t.co/Jqt8a2JV1L">pic.twitter.com/Jqt8a2JV1L</a></p>&mdash; Kony (@Kony12763790) <a href="https://twitter.com/Kony12763790/status/1262200020960346113?ref_src=twsrc%5Etfw">May 18, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

hover skinで設定したskinにゆっくり変わりましたね！

# 5. あとがき
動作に応じて、skinを定義するだけで、簡単に表示させられるのがKonyの強みだと思っております。
それだけでなくCustomCSSを用いることができるので、更なるユーザビリティの向上が期待できます。
今回はhoverアニメーションを紹介させていただきましたが、focus(active擬似クラス)等にも応用できます。

# 6. 参照
https://docs.kony.com/konylibrary/visualizer/visualizer_user_guide/Content/AddCustomCSSCodeToSPAApp.htm