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

Note

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

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

CSSとは?

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

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

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

ホバー時が白枠のボタン

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

Respawn

コードを表示

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以前で使用されていたホバー時に色が変わるボタンです。

Respawn

コードを表示

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;
}