CSSで作る! Minecraft風のボタンなどのスニペット

Note
この記事は最新更新から2年以上が経過しています。内容が古くなっている可能性があるためご注意ください。

今回はウェブ用のMinecraft風のボタンのスニペットをご紹介します。HTMLとCSSのコピペだけで再現でき画像などは使用していません。必要に応じてご自由にコピペや改変を行ってみてください。

CSSとは?

CSSとはHTMLなどを装飾するためのスタイルシート言語のことです。

タイトル画面や設定で使われているボタン

ホバー時が白枠のボタン

現在も使われているホバー時に枠が白くなるボタンです。背景が白い場所などにはあまり向かないかもしれません。幅などはpaddingでお好みで調整してください。

HTML
<a href="#" class="btn-white-box">Respawn</a>
CSS
.btn-white-box {
  display: inline-block;
  padding: 0.5em 5em;
  text-decoration: none;
  background-color: #6f6f6f;
  border: solid 2px #a7a7a7;
  border-right: solid 2px #5a5b5b;
  border-bottom: solid 2px #5a5b5b;
  box-shadow: 0px 0px 0px 2px #0a0a0a;
  color: #fff;
}

.btn-white-box:hover {
  box-shadow: 0px 0px 0px 2px #fff;
}

1.14以前のボタン

1.14以前で使用されていたホバー時に色が変わるボタンです。

HTML
<a href="#" class="btn-blue-box">Respawn</a>
CSS
.btn-blue-box {
  display: inline-block;
  padding: 0.5em 5em;
  text-decoration: none;
  background-color: #6f6f6f;
  border: solid 2px #a7a7a7;
  border-right: solid 2px #5a5b5b;
  border-bottom: solid 2px #5a5b5b;
  box-shadow: 0px 0px 0px 2px #0a0a0a;
  color: #fff;
}

.btn-blue-box:hover {
  background-color: #7e88bf;
  border: solid 2px #c1cbff;
  border-right: solid 2px #5c659d;
  border-bottom: solid 2px #5c659d;
}

プレイボタン

Java Editionのランチャーのプレイボタンを再現してみました。

HTML
<a href="#" class="btn-play">プレイ</a>
CSS
.btn-play {
  display: inline-block;
  padding: 0.5em 5em;
  text-decoration: none;
  background-color: #3e8a4c;
  box-shadow: 0px 0px 0px 2px #0a0a0a;
  color: #fff;
  border: solid 2px #316d42;
  border-top: solid 2px #64cb55;
}

.btn-play:hover {
  background-color: #429255;
}

.btn-play:active {
  box-shadow: 0px 0px 0px 2px #fff;
}

フォントについて

この記事で使用しているボタンのMinecraft風フォントは「Minecraftia」です。アルファベットと数字、記号のみ対応していますがよりMinecraft風のボタンを作りたい場合は使用するのがおすすめです。

コメントを投稿

コメントを送信すると利用規約プライバシーポリシーに同意したものとみなされます。