Share - Tạo Hiệu ứng Button đẹp Mắt Bằng CSS | Gextend - Forums

Trang chủ » Hiệu ứng Button Trong Css » Share - Tạo Hiệu ứng Button đẹp Mắt Bằng CSS | Gextend - Forums

Có thể bạn quan tâm

Gextend
  • Home
  • Forums New posts Search forums
  • Resources Latest reviews Search resources
  • Members Current visitors New profile posts Search profile posts
  • What's new Featured content New posts New resources New profile posts Latest activity
Log in Register What's new Search

Search

Everywhere Threads This forum This thread Search titles only Note By: Search Advanced search…
  • New posts
  • Search forums
Menu Log in Register Install the app Install How to install the app on iOS

Follow along with the video below to see how to install our site as a web app on your home screen.

Note: This feature may not be available in some browsers.

  • Home
  • Forums
  • Discussion
  • Web
  • HTML & CSS
You are using an out of date browser. It may not display this or other websites correctly.You should upgrade or use an alternative browser. ShareTạo hiệu ứng button đẹp mắt bằng CSS
  • Thread starter Thread starter filiallion
  • Start date Start date 11/20/2019
  • Tags Tags button css css3 effect hover
filiallion

filiallion

Administrator
Staff member Administrator Messages 590 Points 10 Language Tiếng Việt Button là thành phần không thể thiếu trên bất kỳ website nào, trên các website khác nhau các bạn sẽ thấy nhiều kiểu button được thiết kế khác nhau, bên cạnh đó hiệu ứng trên các button cũng là một cách nhấn mạnh vai trò quan trọng của nó. Bài viết này tôi sẽ hướng dẫn các bạn tạo hiệu ứng khi hover lên button, tất cả các hiệu ứng được tạo ra chỉ bằng các dòng mã lệnh CSS đơn giản, gọn gàng. Qua các dòng mã lệnh CSS của tôi, các bạn vẫn có thể tuỳ chỉnh mã lệnh để tạo ra các hiệu ứng riêng của mình. Bây giờ, các bạn tạo một button như sau: HTML: <button type="button"></button> Tiếp theo, các bạn tạo hiệu ứng khi hover lên button như sau: CSS: button { height: 32px; padding: 0 15px; font-size: 14px; color: #1d9af2; cursor: pointer; opacity: 0.5; background-color: #292d3e; border: 1px solid #1d9af2; border-radius: 4px; transition: all 0.2s ease-in-out; } button:hover { transform: rotateZ(-30deg); } Một hiệu ứng khác: CSS: button { height: 32px; padding: 0 15px; font-size: 14px; color: #1d9af2; cursor: pointer; background-color: #292d3e; border: 1px solid #1d9af2; border-radius: 4px; transition: all 0.2s ease-in-out; } button:hover { box-shadow: 1px 1px #53a7ea, 2px 2px #53a7ea, 3px 3px #53a7ea; transform: translateX(-3px); } Và cuối cùng là một hiệu ứng đẹp mắt khác: CSS: button { height: 32px; padding: 0 15px; font-size: 14px; color: #1d9af2; cursor: pointer; background-color: #292d3e; border: 1px solid #1d9af2; border-radius: 4px; transition: all 0.2s ease-in-out; } button:hover { animation: swing 1s ease; animation-iteration-count: 1; } @keyframes swing { 15% { transform: translateX(5px); } 30% { transform: translateX(-5px); } 50% { transform: translateX(3px); } 65% { transform: translateX(-3px); } 80% { transform: translateX(2px); } 100% { transform: translateX(0); } } You must log in or register to reply here. Share: Facebook X Bluesky LinkedIn Reddit Pinterest Tumblr WhatsApp Email Share Link
  • Home
  • Forums
  • Discussion
  • Web
  • HTML & CSS
Back Top

Từ khóa » Hiệu ứng Button Trong Css