Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
11 Button Social For Thiết Kế website

11 Button Social For Thiết Kế website


Ngày 23 Tháng 1 Năm 2021

Xin chào các bạn quay lại blog của mình. Hôm nay chúng ta sẽ đi tìm hiểu các component button kết hợp với icon mạng xã hội đẹp trong Bootstrap 4 . Nào hãy cũng mình tìm hiểu nhé!

Các Ví Dụ Về Button Social Icon.

Ngày nay thì hầu như ai cũng dùng các trang mạng xã hội để liên lạc với bạn bè, quảng bá hình ảnh doanh nghiệp, tự do chia sẻ những điều mình thích... Do vậy việc bạn liên kết các trang mạng xã hội, fanpage của mình trong trang web là điều hết sức cần thiết vừa để mọi người biết đến bạn cũng như dễ dàng liên lạc hơn. Dù mục đích trang web của bạn là chia sẻ những câu chuyện hằng ngày, bán hàng, chia sẻ những thứ miễn phí... thì bạn cũng muốn được nhiều trang web hơn do đó việc phát triển Seo trên Google là chưa đủ , bạn nên đặt những nút chia sẻ bài viết trên trang web giúp người dùng dễ dàng chia sẻ với những người khác nếu họ thấy hay vầ ấn tượng về nội dung bài viết của bạn.

Sau đây mình sẽ giới thiệu một số button được thiết kế sẵn bằng HTML, CSS, Bootstrap giúp bạn có thể đa dạng lựa chọn phù hợp với bố cục cũng như thiết kế của trang web.

Thiết Kế Hover Social Button HTML CSS:

Tác giả sử dụng màu nền trắng để phù hợp với đa số icon mạng xã hội và sử dụng tính bo góc để tạo nên sự mềm mại không cứng nhắc cho các nút. Nó cũng cung cấp hiệu ứng tuyệt vời là sẽ thay đổi màu nền trắng thành màu chủ đạo của mạng xã hội đó khi người dùng hover vào. Để hiểu rõ hơn bạn xem đoạn code sau nhé:

Hover Social Button HTML CSS

Kết quả bạn xem bên dưới nhé!

See the Pen Stylish Social Buttons(source from Chris Deacy) by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Tạo Hiệu Ứng Animated Social Icon CSS:

Nút này là sự kết hợp chuyển động Icon mạng xã hội với màu nền của nút. Nó giúp bạn có thể áp dụng cho nhiều loại icon khác nhau cũng như giúp tạo thêm cảm giác thú vị vui vẻ cho người dùng khi trải nghiệm. Để hiểu rõ hơn bạn xem đoạn code sau nhé:

Animated Social Icon CSS

Kết quả bạn xem bên dưới nhé!

See the Pen social icons animated by siddharth sharma (@16sidsharma10) on CodePen.

Nguồn

Cách Tạo Social Button Với Icon:

Nếu bạn thích sự đơn giản thì bạn nên sử dụng nút này với thiết kế được chia thành hai phần là icon và tên mạng xã hội giúp cung cấp thông tin thêm cho người dùng. Hiệu ứng được đơn giản tối đa bằng cách sử thay đổi màu icon phù hợp với màu nền của nút đó. Để hiểu rõ hơn bạn xem đoạn code sau đây nhé:

Social Button Với Icon

Kết quả bạn xem bên dưới nhé!

See the Pen Social Buttons with Icon Fonts by David Pottrell (@davidpottrell) on CodePen.

Nguồn

Thiết Kế CSS Social Button:

Nếu bạn không thích những button hình vuông thông thường thì dưới đây mình cung cấp những button theo hình tròn giúp tạo cảm giác khác lạ cũng như mềm mại hơn. Điểm chú ý ở đây là cách sử dụng màu phù hợp cho từng icon riêng biệt và múc độ đa dạng các icon. Để hiểu rõ hơn bạn xem đoạn code sau đây nhé:

CSS Social Button

Kết quả bạn xem bên dưới nhé!

See the Pen Circular Social Buttons by Shahnur Alam (@codename065) on CodePen.

Nguồn

Hiệu Ứng Hover Animated Social Media Button:

Nếu cảm thấy icon hình tròn ở trên hơi đơn điều thì bạn có thể sử dụng nút này với việc tạo hiệu ứng di chuyển và thay đổi màu nền tùy thuộc vào chủ đề trang web của bạn. Để hiểu rõ hơn bạn xem đoạn code dưới đây nhé:

Hover Animated Social Media Button

Kết quả bạn xem bên dưới nhé!

See the Pen XWbjbJE by Cyrzu (@cyrzu) on CodePen.

Nguồn

Các Hiệu Ứng Hover Social Button HTML5 CSS3:

Nút này có thiết kế khá đơn giản nhưng điểm đặc biệt là hiệu ứng khi hover lên nút sẽ kích thích cảm giác tò mò của người dùng đối với từng icon mạng xã hội riêng biệt được sử dụng trong trang web. Để hiểu rõ hơn bạn xem đoạn code sau nhé:

Các Hiệu Ứng Hover Social Button HTML5 CSS3

Kết quả bạn xem bên dưới nhé!

See the Pen KKwyevV by Kiki (@Malevolent88) on CodePen.

Nguồn

Thiết Kế Circle Button Social Icon CSS:

Nếu bạn thích cả hai nút icon mạng xã hội theo hình vuông và hình tròn thì nút này thực sự đáp ứng nhu cầu của bạn bằng cách chuyển đổi hình khối khi người dùng hover vào nút. Chúng ta cũng có thể linh hoạt áp dụng cho nhiều icon khác tùy vào mục đích sử dụng của mình. Để hiểu rõ hơn bạn xem đoạn code sau đây nhé:

Circle Button Social Icon CSS

Kết quả bạn xem bên dưới nhé!

See the Pen Fancy Colorlib Social by Aigars Silkalns (@colorlib) on CodePen.

Nguồn

Cách Tạo 3D CSS Social Media Button:

Nếu bạn thích thứ gì đó sáng tạo thì bạn có thể sử dụng nút này vì nó tạo hiệu hiệu ứng bằng cách di chuyển 3d tạo nên cảm giác hoàn toàn mới mẻ và sáng tạo và chúng ta có thể thêm các thông tin về trang mạng xã hội của mình như có bao nhiêu lượt thích, xem trang... Để hiểu rõ hơn bạn xem đoạn code sau đây nhé:

3D CSS Social Media Button

Kết quả bạn xem bên dưới nhé!

See the Pen 3D CSS Social Media Buttons by Red Stapler (@redstapler) on CodePen.

Nguồn

Hiệu Ứng Hover Button Với Social Button:

Nút này đáp ứng cho bạn về nhu cầu thiết kế đơn giản, có thể áp dụng trên nhiều bố cục và chủ đề của trang bằng cách thay đổi màu sắc icon, đường viền để phù hợp với mục đích sử dụng của mình. Để hiểu rõ hơn bạn xem đoạn code dưới đây nhé:

Hover Button Với Social Button

Kết quả bạn xem bên dưới nhé!

See the Pen Simple HTML/CSS Social Media Buttons by Aigars Silkalns (@colorlib) on CodePen.

Nguồn

Thiết Kế Background Animation Cho Social Button:

Nút này theo hình khối tròn với hiệu ứng là thay đổi màu nền phù hợp với từng icon mạng xã hội cho nó. Theo mình thấy thiết kế đơn giản nhưng do hình tròn nên giúp người dùng dễ dàng tập trung vào các icon hơn so với các nút hình vuông. Để hiểu rõ hơn bạn xem đoạn code sau đây nhé:

Background Animation Cho Social Button

Kết quả bạn xem bên dưới nhé!

See the Pen Social Buttons by Dariusz Syncerek (@dsyncerek) on CodePen.

Nguồn

Cách Tạo CSS3 Animated Social Sharing Button:

Tập hợp những hiệu ứng hover nút giúp chúng ta có sự đa dạng trong sự lựa chọn hiệu ứng nút để phù hợp với thiết kế và bố cục trang web của chúng ta. Để hiểu rõ hơn bạn xem đoạn code sau đây nhé:

CSS3 Animated Social Sharing Button

Kết quả bạn xem bên dưới nhé!

See the Pen CSS3 Animated Social Sharing Buttons by Lauren Ashpole (@laurenashpole) on CodePen.

Nguồn

Tổng kết:

Qua đây mình mong bài viết sẽ giúp bạn rút ngắn thời gian trong việc thiết kế giao diện button với icon mạng xã hội trong Bootstrap 4 và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!