/* ===================================================
   a タグのリンクを無効にする（見た目はそのまま）
   数値は記事・CodePen と同じ。変えたのは色だけ（6 色に）。
   1つずつ、番号のところからコピーして使えます。
   =================================================== */

/* ---------- 見本の箱（マスに収めるための指定。コピーしなくても同じ形になります） ---------- */
.items > li { padding-bottom: 32px; }

/* ---------- 01 tabindex だけを使う（href なし） ---------- */
a._a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
  padding: 2.0em 1.0em;
  border: 1px solid #2b2a27;
  background: linear-gradient(to right, #fff 50%, #2b2a27 50%);
  background-size: 200% auto;
  box-sizing: border-box;
  color: #2b2a27;
  font-size: 14px;
  text-decoration: none;
  text-align: center;
  transition: .3s;
  position: relative;
}
a._a:after {
  content: "";
  position: absolute;
  right: -5px;
  bottom: -5px;
  width: 100%;
  height: 100%;
  border-right: 1px solid #2b2a27;
  border-bottom: 1px solid #2b2a27;
}
a._a:hover {
  color: #fff;
  background-position: -100% 0;
}

/* ---------- 02 jQuery を使う ---------- */
a._a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
  padding: 2.0em 1.0em;
  border: 1px solid #2b2a27;
  background: linear-gradient(to right, #fff 50%, #2b2a27 50%);
  background-size: 200% auto;
  box-sizing: border-box;
  color: #2b2a27;
  font-size: 14px;
  text-decoration: none;
  text-align: center;
  transition: .3s;
  position: relative;
}
a._a:after {
  content: "";
  position: absolute;
  right: -5px;
  bottom: -5px;
  width: 100%;
  height: 100%;
  border-right: 1px solid #2b2a27;
  border-bottom: 1px solid #2b2a27;
}
a._a:hover {
  color: #fff;
  background-position: -100% 0;
}

/* ---------- 03 JavaScript を使う ---------- */
a._a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
  padding: 2.0em 1.0em;
  border: 1px solid #2b2a27;
  background: linear-gradient(to right, #fff 50%, #2b2a27 50%);
  background-size: 200% auto;
  box-sizing: border-box;
  color: #2b2a27;
  font-size: 14px;
  text-decoration: none;
  text-align: center;
  transition: .3s;
  position: relative;
}
a._a:after {
  content: "";
  position: absolute;
  right: -5px;
  bottom: -5px;
  width: 100%;
  height: 100%;
  border-right: 1px solid #2b2a27;
  border-bottom: 1px solid #2b2a27;
}
a._a:hover {
  color: #fff;
  background-position: -100% 0;
}

/* ---------- 04 いまの書き方（aria-disabled と pointer-events） ---------- */
a._a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
  padding: 2.0em 1.0em;
  border: 1px solid #2b2a27;
  background: linear-gradient(to right, #fff 50%, #2b2a27 50%);
  background-size: 200% auto;
  box-sizing: border-box;
  color: #2b2a27;
  font-size: 14px;
  text-decoration: none;
  text-align: center;
  transition: .3s;
  position: relative;
}
a._a:after {
  content: "";
  position: absolute;
  right: -5px;
  bottom: -5px;
  width: 100%;
  height: 100%;
  border-right: 1px solid #2b2a27;
  border-bottom: 1px solid #2b2a27;
}
a._a:hover {
  color: #fff;
  background-position: -100% 0;
}
a._a[aria-disabled="true"] {
  pointer-events: none;
}