【CSS】はてなブログのプロフィール欄にフラットなボタン的なリンクを載せる
CSS初心者です。
先日のQiitaとGitHubのアカウント登録に伴い、
何となくサイドバーのプロフィール欄にそれぞれへのリンクを追加しました*1。
で、その際、ただ文字列でリンクするのもつまらなかったので、
何となくフラットなボタン的な感じにしました。
下記ブログの丸パクリです。訴えられたら負けると思います。*2
やり方
プロフィール欄はhtml使えるので、「ブログの説明」の末尾にこんな感じで追記。
<div class="profile_qiita"> <a href="http://qiita.com/sakuramochi702" target="_blank">Qiita</a> </div> <div class="profile_github"> <a href="https://github.com/sakuramochi702" target="_blank">GitHub</a> </div>
ボタンっぽくするのとか、:hoverのアクションについてはCSSに記述。
.hatena-module-profile .profile_qiita a { display: block; font-size: 120%; padding: 1px 0px 1px 0px; border: 2px solid #5cb371; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; background-color: #5cb371; color: #fff; text-decoration: none; text-align: center; transition: 0.2s; } .hatena-module-profile .profile_qiita a:hover { text-decoration: none; border: 2px solid #5cb371; background-color: #fff; color: #3c9351; } .hatena-module-profile .profile_github a { display: block; font-size: 120%; padding: 1px 0px 1px 0px; border: 2px solid #ba55d3; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; background-color: #ba55d3; color: #fff; text-decoration: none; text-align: center; transition: 0.2s; } .hatena-module-profile .profile_github a:hover { text-decoration: none; border: 2px solid #ba55d3; background-color: #fff; color: #9a55a3; }
これでそれっぽくなります。
余談_:hoverの絶滅について
僕はCSS初心者で、
今のところ要素の:hoverのアクションでふわふわさせるのが楽しくて遊んでるのですが、
これってモバイル端末だと意味がないんですよねー。
今後タッチパネルに移行していくと、こういう:hoverアクションはどんどん絶滅していくんでしょうか?
つらぽよ。