Label（ラベル）

使い方

  1. ラベルは、お知らせのカテゴリ表示やタグの一覧表示などに使用します。
  2. .e-roundedを指定すれば角丸のラベルも作成できます。

画面表示

NEWS Link

HTML/CSS（Sass）

<a class="e-label e-labeldesign03 e-rounded" href="#">NEWS Link</a>
.e-label {
  display: inline-block;
  padding: 0.2em 0.3em;
  font-size: 1.2rem;
  font-weight: bold;
  box-sizing: border-box;
}

.e-labeldesign {
  background-color: #004da3;
  color: #fff;
}

.e-labeldesign02 {
  background-color: #009bac;
  color: #000;
}

.e-labeldesign03 {
  background-color: #004da3;
  color: #fff;
  border: 2px solid transparent;
  text-decoration: none;
  transition: 0.25s;
}
.e-labeldesign03:focus, .e-labeldesign03:hover {
  background-color: #fff;
  border-color: #004da3;
  color: #004da3;
  cursor: pointer;
}
.e-label {
  display: inline-block;
  padding: .2em .3em;
  font-size: 1.2rem;
  font-weight: bold;
  box-sizing: border-box;
}

//通常ラベル
.e-labeldesign {
  background-color: #004da3;
  color: #fff;
}

//色違い
.e-labeldesign02 {
  background-color: #009bac;
  color: #000;
}

//リンク
.e-labeldesign03 {
  background-color: #004da3;
  color: #fff;
  border: 2px solid transparent;
  text-decoration: none;
  transition: .25s;
  
  &:focus,
  &:hover {
    background-color: #fff;
    border-color: #004da3;
    color: #004da3;
    cursor: pointer;
  }
}
TOP