Tất cả bài viết | CSS3
Hướng dẫn cách tạo hiệu ứng cho nút bằng CSS3
Trong bài học thiết kế web này các Bạn sẽ được Hướng dẫn cách tạo hiệu ứng cho nút bằng CSS3
Bước 1: Tạo cấu trúc HTML
Hướng dẫn cách tạo hiệu ứng cho nút bằng CSS3
Bước 2: Định dạng và tạo hiệu ứng cho nút bằng CSS3
body{ margin:0 auto; padding:0px; text-align:center; width:100%; font-family: "Myriad Pro","Helvetica Neue",Helvetica,Arial,Sans-Serif; } #wrapper{ margin:0 auto; padding:0px; text-align:center; width:995px; } #wrapper h1{ margin-top:50px; font-size:45px; color:#34495E; } #wrapper h1 p{ font-size:18px; } #button_div input[type="button"]{ background-color:none; width:120px; height:50px; margin:20px; font-size:17px; color:white; border:none; } #button_div .simple{ background-color:green; border: 1px solid green; transition: all 0.35s ease; border-radius:5px; } #button_div .simple:hover{ border: 1px solid green; background-color:white; color:green; } #button_div .zoom{ background-color:#5DADE2; transition: all 0.35s ease; border-radius:5px; } #button_div .zoom:hover{ border: 1px solid #5DADE2; background-color:white; color:#5DADE2; transform: scale(1.2);} #button_div .round{ background-color:#922B21; transition: all 0.35s ease; } #button_div .round:hover{ border: 1px solid #922B21; background-color:white; color:#922B21; border-radius:15px; } #button_div .border{ background-color:#6C3483; transition: all 0.35s ease; border-radius:10px 0px 10px 0px; } #button_div .border:hover{ border: 1px solid #6C3483; background-color:white; color:#6C3483; border-radius:0px 10px 0px 10px; } #button_div .box{ background-color:#117A65; transition: all 0.35s ease; border-radius:15px; } #button_div .box:hover{ border: 1px solid #117A65; background-color:white; color:#117A65; border-radius:0px; } #button_div .shadow{ background-color:#B7950B; transition: all 0.35s ease; border-radius:5px; } #button_div .shadow:hover{ border: 1px solid #B7950B; background-color:white; color:#B7950B; box-shadow:0px 0px 25px 0px #B7950B; } #button_div .vertical{ background-color:#873600; transition: all 0.35s ease; border-radius:5px; } #button_div .vertical:hover{ border: 1px solid #873600; background-color:white; color:#873600; animation: vertical .50s linear alternate; } @keyframes vertical { 20%{transform: translateY(0); } 40% {transform: translateY(-10px); } 60%{transform: translateY(0px); } 80%{transform: translateY(15px); } 100% {transform: translateY(0); } } #button_div .horizontal{ background-color:#979A9A; transition: all 0.35s ease; border-radius:5px; } #button_div .horizontal:hover{ border: 1px solid #979A9A; background-color:white; color:#979A9A; animation: horizontal .50s linear alternate; } @keyframes horizontal { 20%{transform: translateX(0); } 40% {transform: translateX(-10px); } 60%{transform: translateX(0px); } 80%{transform: translateX(15px); } 100% {transform: translateX(0); } } #button_div .shake{ background-color:#212F3C; transition: all 0.35s ease; border-radius:5px; } #button_div .shake:hover{ border: 1px solid #212F3C; background-color:white; color:#212F3C; animation: shake 0.005s 100 linear alternate; } @keyframes shake { from{transform: rotate(2deg); } to{transform: rotate(-2deg); } } #button_div .shrink{ background-color:#58D68D; transition: all 0.35s ease; border-radius:5px; } #button_div .shrink:hover{ border: 1px solid #58D68D; background-color:white; color:#58D68D; transform: scale(0.9); } #button_div .bounce{ background-color:#9E0EC8; transition: all 0.35s ease; border-radius:5px; } #button_div .bounce:hover{ border: 1px solid #9E0EC8; background-color:white; color:#9E0EC8; animation: bounce 0.25s 2 linear alternate; } @keyframes bounce { 0%{transform: rotate(0deg); } 50%{transform: rotate(3deg); } 100%{transform: rotate(-3deg); } }
CSS3 Xem (5264) Học thiết kế web giá rẻ