kayotamaoki

sample

ホバーすると色が薄くなるシンプルな装飾です

HTML

                <a href="#" class="simple"></a>

css

                .simple {
  text-align: center;
  display: inline-block;
  width: 300px;
  margin: 0 auto;
  padding: 5px 0;
  background-color: #333;
  color: #fff;
  transition: .4s;
}
.btn:hover {
  opacity: 0.7;
}

sample

ホバーすると色が逆転する装飾です

HTML

                <a href="#" class="r-btn"></a>

css

                .r-btn {
  text-align: center;
  display: inline-block;
  width: 300px;
  margin: 0 auto;
  padding: 5px 0;
  border: 1px solid #333;
  background-color: #fff;
  color: #333;
  transition: .4s;
}
.btn:hover {
  background-color: #333;
  color: #fff;
}

sample

ホバーすると色が左からスライドしてくる装飾です

sample

18行目と25行目のtransform: translateX　を　transform: translateY　に変更するだけで、色が上から降りてくる装飾になります

HTML

                <a href="#" class="s-btn"></a>

css

                .s-btn {
  text-align: center;
  display: inline-block;
  width: 300px;
  margin: 0 auto;
  padding: 5px 0;
  border: 1px solid #333;
  color: #333;
  transition: .4s;
  position: relative;
  overflow: hidden;
}
.btn::before {
  content: "";
  display: inline-block;
  width: 100%;
  height: 100%;
  background-color: #333;
  transform: translateX(-100%);
  position: absolute;
  top: 0;
  left: 0;
  transition: .4s;
}
.btn:hover::before {
  transform: translateX(0);
  z-index: -1;
}
.btn:hover {
  color: #fff;
}

sample

ホバーすると矢印が右にスライドする装飾です次へ誘導するイメージです ※justify-content: space-between;を使って文字と矢印を両サイドに配置しています

HTML

                <a href="#" class="ar-btn"></a>

css

                .ar-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  padding: 5px 50px;
  width: 300px;
  color: #333;
  border: 1px solid #333;
  transition: .4s;
}
.btn::before {
  content: "";
  position: absolute;
  top: calc(50% - 2px);
  right: 30px;
  background-color: #333;
  width: 60px;
  height: 2px;
  transition: .4s;
}
.btn::after {
  content: "";
  background-color: #333;
  width: 8px;
  height: 2px;
  transform: translateY(-2px) rotate(30deg);
  position: absolute;
  top: calc(50% - 2px);
  right: 30px;
  transition: .4s;
}
.btn:hover::before,.btn:hover::after {
  right: -20px;
}

sample

ホバーするとパソコンのカーソルボタンを押し込んだような動きの装飾です文字色＞背景色＞text-shadowと色の濃さを薄くしていくことで文字が凹んでエンボス加工されているイメージです

HTML

                <a href="#" class="emb-pc-btn"></a>

css

                .emb-pc-btn {
  text-align: center;
  display: inline-block;
  border-radius: 5px;
  font-size: 1.6rem;
  font-weight: bold;
  width: 300px;
  margin: 0 auto;
  padding: 5px 0;
  background-color: #668ad8;
  color: #4d6599;
  border-bottom: 2px solid rgba(0, 0, 0, 0.3);
  box-shadow: 2px 4px 2px rgba(0, 0, 0, 0.3);
  text-shadow: 1px 1px 1px rgba( 255, 255, 255, 0.5);
  letter-spacing: 0.5rem;
  transition: .4s;
}
.btn:hover {
  border-bottom: 2px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 0 rgba( 0, 0, 0, 0);
  transform: translateY(4px);
}

sample

グラデーションで丸みを出し、ホバーすると色が明るくなる装飾です

HTML

                <a href="#" class="g-pc-btn"></a>

css

                .g-pc-btn {
  text-align: center;
  display: inline-block;
  border-radius: 5px;
  font-size: 1.6rem;
  font-weight: bold;
  width: 300px;
  margin: 0 auto;
  padding: 5px 0;
  background-image: linear-gradient(#668ad8 0%, #4d6599 100%);
  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.5);
  color: #4d6599;
  letter-spacing: 0.5rem;
  transition: .4s;
}
.btn:hover {
  background-image: linear-gradient(#668ad8 0%, #668ad8 100%);
}

ホバーすると色が明るくなり、ボタンを押し込んだような動きの装飾ですアマゾンマークはfont-awesomeのCDNを利用しています

HTML

                <a href="#" class="c-emb-btn"></a>

css

                .c-emb-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 3rem;
  font-weight: bold;
  width: 100px;
  height: 100px;
  margin: 0 auto;
  background-image: linear-gradient(#668ad8 0%, #4d6599 100%);
  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.5);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.5), 1px 2px 2px rgba(0, 0, 0, 0.5);
  color: #4d6599;
  border-bottom: 1px solid #4d6599;
  transition: .4s;
}
.btn:hover {
  background-image: linear-gradient(#668ad8 0%, #668ad8 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 1px rgba(0, 0, 0, 0.5);
  transform: translateY(2px);
}

sample

ホバーすると文字のみが回転する装飾です

sample

14行目のtransform: rotate(720deg);をtransform: rotateY(720deg);に変更するだけで円ごと回転します

HTML

                <a href="#" class="c-rot-btn"></a>

css

                .c-rot-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  margin: 0 auto;
  color: #4d6599;
  border: 4px double #4d6599;
  transition: .4s;
}
.c-rot-btn:hover {
  transform: rotate(720deg);
}

sample

ホバーすると上下のボーダーが内側に伸縮する装飾です

HTML

                <a href="#" class="bo-mv-btn"></a>

css

                .bo-mv-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  width: 300px;
  margin: 0 auto;
  padding: 15px 0;
  color: #4d6599;
  position: relative;
}
.btn::before {
  content: "";
  background-color: #4d6599;
  width: 100%;
  height: 3px;
  position: absolute;
  top: 0;
  left: 0;
  transition: .4s;
}
.btn::after {
  content: "";
  background-color: #4d6599;
  width: 100%;
  height: 3px;
  position: absolute;
  bottom: 0;
  left: 0;
  transition: .4s;
}
.btn:hover::before {
  top: 3px;
  width: 80%;
  margin-left: 10%;
}
.btn:hover::after {
  bottom: 3px;
  width: 80%;
  margin-left: 10%;
}

ホバーするとツイッターのアイコンのみくるくる回転する装飾ですツイッターのアイコンはfont-awesomeのCDNを利用しています

HTML

                <a href="#" class="tw-note-btn"></a>

css

                .tw-note-btn {
  text-align: center;
  display: flex;
  align-items: center;
  width: 300px;
  margin: 0 auto;
  height: 60px;
  font-size: 20px;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
}
.btn .icon {
  width: 60px;
  height: 60px;
  line-height: 60px;
  background-color: #1da1f3;
}
.btn .icon i {
  color: #fff;
  transition: .4s;
}
.btn .tweet {
  width: calc(300px - 60px);
  letter-spacing: 0.2rem;
  background-color: #fff;
}
.btn:hover i {
  transform: rotateX(720deg);
}

ボタン装飾サンプルコード

ボタン装飾サンプルコード