Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Ví Dụ Về Button Kết Hợp Với Social Icon

Ví Dụ Về Button Kết Hợp Với Social Icon


Ngày 11 Tháng 4 Năm 2020

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é!

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.

Stylish Social Buttons:

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é:

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

Để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x và nếu nó không hiển thị thì bạn nhớ xác minh mình là con người trong Codepen mới xem được nhé. Còn đây là nguồn mình sao chép: Stylish Social Buttons.

Social Icons Animated:

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é:

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

Để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x và nếu nó không hiển thị thì bạn nhớ xác minh mình là con người trong Codepen mới xem được nhé. Còn đây là nguồn mình sao chép: Social Icons Animated.

Social Buttons with Icon Fonts:

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é:

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

Để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x và nếu nó không hiển thị thì bạn nhớ xác minh mình là con người trong Codepen mới xem được nhé. Còn đây là nguồn mình sao chép: Social Buttons with Icon Fonts.

Circular Social Buttons:

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é:

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

Để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x và nếu nó không hiển thị thì bạn nhớ xác minh mình là con người trong Codepen mới xem được nhé. Còn đây là nguồn mình sao chép: Circular Social Buttons.

Animated Social Media Buttons:

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é:

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

Để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x và nếu nó không hiển thị thì bạn nhớ xác minh mình là con người trong Codepen mới xem được nhé. Còn đây là nguồn mình sao chép: Animated Social Media Buttons.

Hover Over Social Buttons:

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é:

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

Để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x và nếu nó không hiển thị thì bạn nhớ xác minh mình là con người trong Codepen mới xem được nhé. Do đây sử dụng SCSS nếu bạn muốn sử dụng CSS thì có thể xem tại đây nhà : SCSS to CSS. Còn đây là nguồn mình sao chép: Hover Over Social Buttons.

Fancy Colorlib Social:

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é:

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

Để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x và nếu nó không hiển thị thì bạn nhớ xác minh mình là con người trong Codepen mới xem được nhé. Do đây sử dụng SCSS nếu bạn muốn sử dụng CSS thì có thể xem tại đây nhà : SCSS to CSS. Còn đây là nguồn mình sao chép: Fancy Colorlib Social.

3D CSS Social Media Buttons:

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é:

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

Để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x và nếu nó không hiển thị thì bạn nhớ xác minh mình là con người trong Codepen mới xem được nhé. Còn đây là nguồn mình sao chép: 3D CSS Social Media Buttons.

Minimal CSS/HTML Social Buttons by Colorlib:

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é:

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

Để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x và nếu nó không hiển thị thì bạn nhớ xác minh mình là con người trong Codepen mới xem được nhé. Do đây sử dụng Less nếu bạn muốn sử dụng CSS thì có thể xem tại đây nhà : Less to CSS. Còn đây là nguồn mình sao chép: Minimal CSS/HTML Social Buttons by Colorlib.

Social Buttons:

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é:

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

Để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x và nếu nó không hiển thị thì bạn nhớ xác minh mình là con người trong Codepen mới xem được nhé. Do đây sử dụng SCSS nếu bạn muốn sử dụng CSS thì có thể xem tại đây nhà : SCSS to CSS. Còn đây là nguồn mình sao chép: Social Buttons.

CSS3 Animated Social Sharing Buttons:

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é:

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

Để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x và nếu nó không hiển thị thì bạn nhớ xác minh mình là con người trong Codepen mới xem được nhé. Còn đây là nguồn mình sao chép: CSS3 Animated Social Sharing Buttons.

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ẻ!