16bit!

エンジニアじゃなくなっちゃった人が何かを書くブログ

【CSS】はてなブログのプロフィール欄にフラットなボタン的なリンクを載せる

CSS初心者です。

先日のQiitaとGitHubのアカウント登録に伴い、
何となくサイドバーのプロフィール欄にそれぞれへのリンクを追加しました*1

で、その際、ただ文字列でリンクするのもつまらなかったので、
何となくフラットなボタン的な感じにしました。
下記ブログの丸パクリです。訴えられたら負けると思います。*2

KYOHON 今日から本気を出したい的なアレ。

やり方

プロフィール欄は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アクションはどんどん絶滅していくんでしょうか?


つらぽよ。

*1:ただしGitHubにはまだ何もない(記事投稿時点)

*2:この方のデザイン好きー。いろいろと参考にさせてもらってます。