Các hiệu ứng hover đẹp cho button

Đây là những mẫu button đẹp bằng CSS mình sưu tầm được từ nhiều nguồn, xin chia sẻ với mọi người nhé!

1. Mẫu 1

Source code:

<div class="button-wrap">
        <a href="#" class="btn btn-style1">Read more</a>
    </div>

.btn {
    text-decoration: none!important;
    color: #00c6ff;
    font-size: 15px;
}
.btn-style1 {
  position: relative;
  overflow: hidden;
  padding: 5px 20px !important;
  border-left: 0px !important;
  border-right: 0px !important;
  background: rgba(255,255,255,0.05);
  box-shadow: 0 15px 35px rgba(0,0,0,0.2);
  border-top: 1px solid rgba(255,255,255,0.1) !important;
  border-bottom: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 30px;
  z-index: 0;
  transition: all 0.3s;
    
}
.btn-style1::before {
  content: "";
  position: absolute;
  width: 50%;
  height: 100%;
  background: linear-gradient(to left, rgba(255,255,255,0.3),transparent);
  left: -60%;
  top: 0;
  transition: .5s transform ease-out;
  z-index: -1;
  transform: skewX(45deg) translateX(0);
}
.btn-style1:hover::before {
  transform: skewX(45deg) translateX(300%);
}

2. Mẫu 2

Source code HTML & CSS:

<div class="demo-wrap black-bg">
    <button class="btn btn-style2">Học làm Website</button>
<button class="btn btn-style3">
      <span></span><span></span><span></span><span></span>
      Học CSS
    </button>
</div>

.btn-style2 {
    display: inline-block;
    padding: 15px 30px;
    color: white;
    background-color: transparent;
    border: none;
    outline: none;
    position: relative;
    cursor:pointer;
    z-index: 1;
}
.btn-style2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 0;
  width: 2px;
  background-color: #6eb48c;
  z-index: -1;
  transition: height 0.25s linear, width 0.25s ease-in-out 0.25s;
}
.btn-style2:hover::before {
  height: 100%;
  width: 100%;
}
.btn-style3 {
    display: inline-block;
    padding: 15px 50px;
    margin: 15px;
    background-color: transparent;
    color: white;
    border: none;
    outline: none;
    position: relative;
    font-size: 20px;
    z-index: 1;
    cursor: pointer;
}
.btn-style3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0;
  background-color: rgba(110, 180, 140, 0.72);
  transition: width 0.25s linear 1s;
  z-index: -1;
}
.btn-style3 span {
  position: absolute;
  background-color: #6eb48c;
  display: block;
  transition: all 0.25s cubic-bezier(0.19, 1, 0.22, 1);
}
.btn-style3 span:nth-child(1) {
  top: 0;
  left: 0;
  width: 0;
  height: 2px;
}
.btn-style3 span:nth-child(2) {
  top: 0;
  right: 0;
  width: 2px;
  height: 0;
  transition-delay: 0.25s;
}
.btn-style3 span:nth-child(3) {
  bottom: 0;
  right: 0;
  width: 0;
  height: 2px;
  transition-delay: 0.5s;
}
.btn-style3 span:nth-child(4) {
  bottom: 0;
  left: 0;
  width: 2px;
  height: 0;
  transition-delay: 0.75s;
}
.btn-style3:hover span:nth-child(odd) {
  width: 100%;
}
.btn-style3:hover span:nth-child(even) {
  height: 100%;
}

.btn-style3:hover:before {
  width: 100%;
}