Hướng dẫn tạo hiệu ứng cho button - demo
RUN
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> /*Thiết lập chung cho các button*/ .button { position: relative; border: none; font-size: 28px; color: #FFFFFF; padding: 20px; width: 200px; text-align: center; -webkit-transition-duration: 0.4s; /* Safari */ transition-duration: 0.4s; text-decoration: none; overflow: hidden; cursor: pointer; border-radius: 10px; margin-left: 20px; } /*Thiết lập hiệu ứng cho button hover*/ button#hover { background-color: #999933; } #hover span { cursor: pointer; display: inline-block; position: relative; transition: 0.5s; } #hover span:after { content: '\00bb'; position: absolute; opacity: 0; top: 0; right: -20px; transition: 0.5s; } #hover:hover span { padding-right: 25px; } #hover:hover span:after { opacity: 1; right: 0; } /*Thiết lập hiệu ứng cho button click*/ button#click { background-color: #006699; } #click:hover {background-color: #3e8e41} #click:active { background-color: #3e8e41; transform: translateY(5px); } </style> </head> <body> <h1>Học lập trình miễn phí tại freetuts.net</h1> <button class="button" id="click"><span>Click </span></button> <button class="button" id="hover"><span>Hover </span></button> </body> </html>
PHÓNG TO