HOT !!!Hiện Tại HungCoder.Com Đang Phát Hành Trang Chat Miễn Phí Cho Mọi Người Giao Đỗi Thông Tin Với Nhau.Click Here

Thứ Ba, tháng 12 25, 2018

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

23 nhận xét

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

    Trả lờiXóa
  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

    Trả lờiXóa
    Trả lời
    1. Trang trí ngày tết trên blog a có viết rồi, e thử tìm xem.

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

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

      Xóa
  3. tết tết tết tết tết đến rồi :p

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

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

      Xóa
    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ứ =)))

      Xóa
  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 ><

    Trả lờiXóa
  5. Trả lời
    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à

      Xóa

Monetize your website traffic with yX Media