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@
Đù =)) cái này nhìn đơn giản này
Trả lờiXóaa 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óaTrang trí ngày tết trên blog a có viết rồi, e thử tìm xem.
Xóaem lục 67 trang đến trang cuối rồi mà không có anh,khung seach cx không hiện
XóaE tìm trong site map ấy. K thì để đó khi nào a tìm cho
Xóalâu r e ko ghé qa :D
Trả lờiXóaThế đã quên a chưa :))
Xóatết tết tết tết tết đến rồi :p
Trả lờiXóaTết này cũng giống tết xưa, chỉ có 1m cô đơn hiu quạnh mà thôi =)))
Xóacó ny nó cũng dị à anh :) tới tết còn xém ctay nữa kìa :(
XóaKhá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óaquá tuyệt vời <3
Trả lờiXóaQuá bình thường :)
XóaOke, Cảm ơn a
Trả lờiXóaK có gì e :)
XóaHappy 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óaCảm ơn e, e cũng vậy nhé :)
XóaHappy New Year 1.1.2019
Trả lờiXóaCảm ơn e, e cũng vậy nhé :)
Xóađẹp đó anH ơi
Trả lờiXóaCopy sao k đẹp đc e :))
XóaDemo thứ 3 sao sao á a
Trả lờiXóaHehe, 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