Tạo Button Bằng CSS Có Hiệu Ứng Đẹp Cho Blogspot

Bài viết này mình sẽ hướng dẫn cho các bạn tạo một button bằng Css nhưng lại có hiệu ứng khá đẹp cho blogspot.


Nhìn rất đơn giản mà lại có nét đặc biệt nhé mọi người :D

CSS CODE

.btn{
  border: 1px solid #3498db;
  background: none;
  padding: 10px 20px;
  font-size: 20px;
  font-family: "montserrat";
  cursor: pointer;
  margin: 10px;
  transition: 0.8s;
  position: relative;
  overflow: hidden;
}
.btn1,.btn2{
  color: #3498db;
}
.btn3,.btn4{
  color: #fff;
}
.btn1:hover,.btn2:hover{
  color: #fff;
}
.btn3:hover,.btn4:hover{
  color: #3498db;
}
.btn::before{
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 0%;
  background: #3498db;
  z-index: -1;
  transition: 0.8s;
}
.btn1::before,.btn3::before{
  top: 0;
  border-radius: 0 0 50% 50%;
}
.btn2::before,.btn4::before{
  bottom: 0;
  border-radius: 50% 50% 0 0;
}
.btn3::before,.btn4::before{
  height: 180%;
}
.btn1:hover::before,.btn2:hover::before{
  height: 180%;
}
.btn3:hover::before,.btn4:hover::before{
  height: 0%;
}

HTML CODE
 <button class="btn btn1"><a href="">Hover Me</a></button>
  <button class="btn btn2"><a href="">Hover Me</a></button>
  <button class="btn btn3 "><a href="">Hover Me</a></button>
  <button class="btn btn4 "><a href="">Hover Me</a></button>

Chúc các bạn thành công, và DEMO ngay tại đây cho mọi người xem :D







Nguồn : Desez Blog



Mật Khẩu Mặc Định Để Tải Template Hoặc Apps Nếu Có :
hungcoder.com Hoặc Smile92@

Related Posts

23 Comments

  1. Đù =)) cái này nhìn đơn giản này

    ReplyDelete
  2. a hùng bao giờ anh viết bài share code trang trí blog ngày tết đi anh,sắp tết rồi

    ReplyDelete
    Replies
    1. Trang trí ngày tết trên blog a có viết rồi, e thử tìm xem.

      Delete
    2. em lục 67 trang đến trang cuối rồi mà không có anh,khung seach cx không hiện

      Delete
    3. E tìm trong site map ấy. K thì để đó khi nào a tìm cho

      Delete
  3. tết tết tết tết tết đến rồi :p

    ReplyDelete
    Replies
    1. Tết này cũng giống tết xưa, chỉ có 1m cô đơn hiu quạnh mà thôi =)))

      Delete
    2. có ny nó cũng dị à anh :) tới tết còn xém ctay nữa kìa :(

      Delete
    3. Khác chứ e :D còn có chút hơi ấm tí cho đỡ lạnh :v con có cái ra cái vào nữa chứ =)))

      Delete
  4. Happy new year <3 chúc anh hùng có thật nhiều sức khỏe, nhanh chóng hết FA ><

    ReplyDelete
  5. Replies
    1. Hehe, demo phụ họa cho bài viết thôi. Chứ a cũng k rỏ, nhưng a thấy ổn mà

      Delete