BLOG

2020/10/03

CSSのみで作るホバーボタンの作り方【備忘録】

こんにちは
先日架空のホームページを作りました

その中でカッコいいボタンの装飾が!!

やった事なかったんですがなんとか調べて出来たので備忘録として
残しておきます。

参考サイトはこちら

<a class="exsample__btn button" href="#">ボタンです</a>
.exsample__btn {
  border: 1px solid #2A2A2A;
  display: block;
  text-decoration: none;
  color: #2A2A2A;
  background-color: #FDEC01;
  color: #405E2D;
  width: 250px;
  height: 60px;
  line-height: 60px;
  z-index: 0;
}
.exsample__btn:hover::after {
  background-color: #2A2A2A;
}
.exsample__btn:not(hover)::after {
  top: 0;
  right: 0;
  background-color: #fDEC01;
}
.button {
position: relative;
display: inline-block;
width: 200px;
height: 50px;
text-align: center;
text-decoration: none;
line-height: 54px;
outline: none;
z-index: 2;
line-height: 50px;
overflow: hidden;
}
.button::before, .button::after {
position: absolute;
z-index: -1;
display: block;
content: '';
}
.button, .button::before, .button::after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all .3s;
transition: all .3s;
}
.button:hover {
color: #fff;
text-decoration: none;
}
.button::after {
left: -100%;
width: 100%;
height: 100%;
}
.button:hover::after {
top: 0;
left: 0;
background-color: #405E2D;
}
.button:not(hover)::after {
top: 0;
right: 0;
background-color: #405E2D;
}

レビューはこちら
ボタンです