hoverで変化するsns共有ボタン

Fontawesomeを使ったiconは便利ですよね、ただシンプルなので味気ない気もします。
今回はちょっとアレンジしたいと思います！

# 前提
+ HTML
+ CSS
+ Fontawesome（CDN）
+ Bootstrap (CDN)

だけで実装可能です！

<a href="https://daigo0001.github.io/sns-icon/"><i><b>動作はこちらで確認してください</b></i></a>

#　実装
まずは`HTML`ファイルのheadに以下のコードを追加してください

```css:index.css
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<link rel ="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css">
```

これで`Fontawesome`と`Bootstrap`が使えます。

### 使用アイコン
以下のように描くことで`Twitter`と`Instagram`のアイコンが使えます

```css:index.css
<i class="fab fa-twitter fa-3x"></i>
<i class="fab fa-instagram fa-3x"></i>
/*-「fa-3x」と書いているのはサイズを大きくしているからです。消してもらっても構いません-*/
```
[![Image from Gyazo](https://i.gyazo.com/7fca1c5825435749e1b98c6a884d6aa1.png)](https://gyazo.com/7fca1c5825435749e1b98c6a884d6aa1)

__これでアイコンの実装が完了しました。__
少しアレンジしていきたいと思います。

```html:index.html
  <div class="row text-center mt-5 pt-5">
    <div class="col-6 mb-3"><a href="#" class="tweet"><i class="fab fa-twitter fa-3x"></i></a></div>
    <div class="col-6 mb-3"><a href="#" class="insta"><i class="fab fa-instagram fa-3x"></i></a></div>
  </div>
```

＊_ここで使っているbootstrapのクラスについて説明します_
__row__: 画面を12分割する
__mt, pt__: margin-top, padding-topのことです。 1 ~ 5まで指定できます。
__text-center__: text-align: center;と同じ
__col-6__: rowと合わせて使うことで12分割したうちの6カラム使用するとなります。
__mb-3__: margin-bottomのことです。1 ~ 5まで指定できます。


### アイコンだけだと味気ないので、枠に入れたいと思います。

```css:index.css
.tweet{
  text-decoration: none;　/*--aで括っているのでリンクの下線などを消すために設定しています--*/
  color: black;
}

.tweet i{
  border: 2px solid black;
  border-radius: 50%; /*--ここで丸くしています-*/
  padding: 10px;

```

[![Image from Gyazo](https://i.gyazo.com/94569eb6510a367c35b13e2ff6fa4214.png)](https://gyazo.com/94569eb6510a367c35b13e2ff6fa4214)


ちょっとだけ見やすくなりましたね！
色も変えちゃいましょう

```css:index.css
.tweet{
  text-decoration: none;
  color: white;
}

.tweet i{
  border: 2px solid white;
  border-radius: 50%;
  padding: 10px;
  background-color: skyblue;
}
```

[![Image from Gyazo](https://i.gyazo.com/8df31d326f2025cb46bbf9a3e833eb0c.png)](https://gyazo.com/8df31d326f2025cb46bbf9a3e833eb0c)

twitterっぽくなりました！

最後に一工夫です。
このアイコンにカーソルが乗った場合に変化させましょう！

```css:index.css
.tweet{
  text-decoration: none;
  color: white;
  transition: all 0.3s ease;
}

.tweet:hover{
  color: blue;
}

.tweet i{
  border: 2px solid white;
  border-radius: 50%;
  padding: 10px;
  background-color: skyblue;
  transition: all 0.5s ease;
}

.tweet i:hover{
  border-radius: 0;
  transform: rotate(360deg);
  background-color: white;
  border: 2px solid skyblue;
}

/*----- インスタグラム ------*/
.insta i{
  border: 2px solid red;
  border-radius: 50%;
  padding: 10px;
  cursor: pointer;
  transition: all 0.5s ease;
  background-color: white;
}

.insta i:hover{
  border-radius: 0;
  transform: rotate(360deg);
  background-color: red;
  border: 2px solid red;
}

.insta{
  text-decoration: none;
  color: red;
  transition: all 0.3s ease;
}

.insta:hover{
  color: white;
}
```

transitionをhoverさせたい要素に加えることでhoverした時のcssが適用されるまでの時間や動きかたを変更できます。
`tweet`の例で見ると、0.3秒かけてゆっくり変化させています。

```
transition: all 0.3s ease;
all => どのプロパティに適用するか
0.3s => 「s」か「ms」として指定できます
ease => 動きかたの指定
```

### 以上で実装をおわります！
注意点としては、transformの指定は"a"タグや"span"タグに対しては指定できないみたいなので注意してください！