ハイパーリンクのボタンに変化をつける

Question

 <div class="insta"><a href="http://www.yahoo.com">INSTAGRAM</a></div>

.insta {
    width:200px;
    height:26.5px;
    padding:15px;
    background-color:silver;
    border-radius:5px;
    margin:40px auto 60px auto;
    display:flex;
    justify-content:center;
    align-items:center;
    border:1px solid black;
   
}

.insta a {
    text-align:center;
    color:black;
    font-weight:bold;
    text-decoration:none;
}

.insta:hover {
    background-color:lightskyblue;
}

.isnta a:hover {
    color:white;
}

このボタンのINSTAGRAMという文字の横に▶︎のマークをつけ、hoverしたときにも、ドラッグのアイコンが矢印に変わり、文字とborderと▶︎の色がグレイに変わるようにしたいのですが、どうすれば、宜しいでしょうか。

Comments

[m.ts10806]

質問が途中で切れています。

[rasta]

付け足しました。

[yambejp]

一部instaがisntaになってます

Answer 1

特殊文字の表示なら下記を参考に。
特殊文字リファレンス
右向き矢印は9654あたりですね。

本来なら&とか<>©とか、そういうのもhtml上での特殊文字です。

あとはアイコンフォントを使うも良し。
fontawesome，material iconsなど。

今起きてる現象わかりませんが、
.isnta a:hover
↓
.insta a:hover

でそれっぽく動くのではないでしょうか。
短い単語でもコピペが確実です。