koblog

高校生のWEBデザインブログ

CSSだけ!YouTube風の高評価ボタンのサンプル

サムネイル

YouTubeなど動画配信サービスには高評価ボタンがあるのに、文章を配信するブログではほとんど高評価ボタンは見ません。

とはいえシェアボタンが多く使われるので、必ずしも必要ではありませんがあれば面白いと思います。

 

そこで今回はYouTube風の高評価ボタンを作ってみたので紹介します。あまり実用的ではありませんが、少し面白みを出したい時に導入してみてください。

 

 

DEMO

 

  高評価 0

  高評価 0

 

クリックすると右のカウントが進んでいきます。

今回のサンプルは簡易的なものなので、YouTubeの高評価ボタンのようにカウントは保存されませんが、ちょっとした仕掛けには丁度良いのではないでしょうか。

 

グッドボタンにはFontAwesomeを使っています。

はてなブログなどでFontAwesomeが使えない場合は、下の記事をどうぞ。

 

 

チャンネル登録風ボタンのコード

まずはチャンネル登録風のボタンのコードです。背景色には実際のボタンと同じ色を使っています。またオリジナルで角を丸くすることで、ブログに馴染みやすくしています。

 

HTML
<p>
<a class="sub" onclick="countUpA();">
<i class="fas fa-thumbs-up"></i> 高評価</a>
<span id="sub" style="margin-left: 10px">0</span>
</p>

 

CSS
.sub {
    display: inline-block;
    padding: 0.5em 1em;
    text-decoration: none;
    background: #fc0d1b;
    color: #fff;
    border-radius: 3px
}

 

JS
var $countA = 0;
function countUpA() {
    document.getElementById( "sub" ).innerHTML = ++$countA;
}

 

高評価風のボタン

次に背景に色がない高評価ボタンです。

アイコンと文字の色を灰色にしています。HTMLのFont Awesomeのコードを変えることで、低評価ボタンにもできます。下のコードに変えることで低評価ボタンになります。

 <i class="far fa-thumbs-down"></i>

 

HTML
<p>
<a class="good" onclick="countUpB();">
<i class="far fa-thumbs-up" style="color: gray"></i> 高評価</a>
<span id="good" style="margin-left: 10px">0</span>
</p>

 

CSS
.good {
    font-family: "Font Awesome 5 Free";
    content: "\f164";
    color: gray;
    margin-right: 5px
}

 

JS
var $countB = 0;
function countUpB() {
    document.getElementById( "good" ).innerHTML = ++$countB;
}

サムネイルPC
POPULAR
サムネイル

【コピペのみ】ブログのシェアボタンをシンプルでオシャレにカスタマイズしよう!

サムネイル

Twitterの「埋め込みタイムライン」を使う方法

サムネイル

【CSS】コードをオシャレに飾るボックスデザイン


スポンサーリンク


NEW POST
サムネイル

2019.8.30 Fri

Xcodeを使ってスマートフォン用サイトの動作確認をしてみる【Mac】

サムネイル

2019.4.09 Tue

【2019年版】Disqusのおすすめ設定

サムネイル

2019.8.07 Wed

JavaScriptでURLを遷移させる【ジャンプページを作る方法】

サムネイル

2019.6.12 Wed

JavaScriptでページのURLをコピーする機能を作ってみる

サムネイル

2019.6.04 Tue

はてなブログのCSSがスマホで反映されないときの対処法

サムネイル

2019.6.03 Mon

Javascriptで「前のページに戻る」リンクを作ってみる