Giảm bớt sự đơn điệu cho trang web của bạn với Gradient Button

Cập nhật: Lượt xem: 1840 [ Css ]

Các button trông đẹp, lạ mắt và có các hiệu ứng thú vị đi kèm khi người dùng hover, focus vào sẽ làm cho trang web của bạn trở nên hấp dẫn hơn.

Giảm bớt sự đơn điệu cho trang web của bạn với Gradient Button

Nếu bạn đang sỡ hữu 1 blog, website chia sẻ về chủ đề nghệ thuật như mỹ thuật, nhiếp ảnh, âm nhạc, về sức khỏe, làm đẹp, hoặc 1 website bất kỳ. Nhưng bạn thấy giao diện trang web của mình vẫn chưa đủ hấp dẫn end-user, thì hãy thử thay đổi 1 vài thứ nhỏ xem, 1 trong số đó là các button trong trang web chẳng hạn. Các button trông đẹp, lạ mắt và có các hiệu ứng thú vị đi kèm khi người dùng hover, focus vào sẽ làm cho trang web của bạn trở nên hấp dẫn hơn.

Một trang web tuyệt vời với các button đẹp mắt sẽ tạo sự thu hút và giúp bạn điều hướng khách truy cập hướng tới bất kỳ hành động nào bạn muốn họ thực hiện, cho dù đó là đăng ký tài khoản mới hoặc mua thứ gì đó từ cửa hàng thương mại điện tử của bạn chẳng hạn.

Nhưng nếu bạn là 1 backend developer, không chuyên về frontend, hoặc đơn giản là bạn...lười 😄. Thì mình sẽ giới thiệu cho bạn 1 thư viện có sẵn hàng trăm mẫu button (nó vẫn còn được tác giả tiếp tục cập nhật thêm), với style gradient color cực kỳ lung linh và đẹp mắt, giúp bạn làm mọi việc dễ dàng hơn mà không phải gõ 1 dòng code nào (trừ khi bạn muốn :v). Đó chinh là thư viện Gradientbuttons được tạo ra bởi tác giả Csaba Kissi.

Nếu bạn thấy một style button mà bạn thích, chỉ cần nhấp vào "Get CSS Code" ngay bên dưới mỗi button. Từ đó bạn có thể copy/paste code CSS vào source code của bạn là xong. Mỗi hiệu ứng hover đều có trong code CSS đi kèm để bạn có thể chỉnh sửa style sao cho cho phù hợp với thiết kế của mình.

Nếu bạn lo lắng thư viện Gradient Button này có thể chưa làm việc tốt cho tất cả các trình duyệt, đặc biệt là các trình duyệt quá cũ thì bạn có thể hoàn toàn yên tâm. Mình đã check qua hầu hết tất cả các trình duyệt phổ biến hiện nay, và chỉ có 1 số style là không hoạt động trên trình duyệt IE9 trở xuống mà thôi, mà bây giờ thì có mấy người còn dùng IE9 nữa đâu nhỉ! 😅

Và nếu bạn có bất kỳ câu hỏi hoặc đề xuất, đóng góp nào cho tác giả, bạn có thể liên hệ trực tiếp với tác giả thông qua Twitter của anh ấy tại Csaba Kissi.

Trên đây là 1 bài viết ngắn của mình chia sẻ về một số tips, thủ thuật nhỏ của mình trong khi nghiên cứu, làm việc. Hy vọng nó sẽ giúp ích cho các bạn. Xin chào và hẹn gặp lại!