Hướng dẫn cách tạo button bằng html cho Blogspot và WordPress

Hướng dẫn cách tạo button bằng html cho Blogspot và WordPress: Blogspot và WordPress là 2 mãi nguồn mở được sử dụng nhiều nhất hiện nay, Nó rất dễ dàng để cài đặt và sử dụng nên những ai không chuyên cũng có thể tự tạo cho mình được.

Và hầu hết mọi người dùng 2 mã nguồn mở này chủ yếu là chia sẻ tài liệu, game,… Đối với người không chuyên như mình thì việc tạo một nút bấm bằng CSS là khá khó hoặc có người chia sẻ code nhưng đôi khi cũng sẽ khó áp dụng hơn. Hôm nay mình sẽ hướng dẫn cách tạo button bằng html cho Blogspot và WordPress

Hướng dẫn cách tạo button bằng html cho Blogspot và WordPress

Đoạn code mình chia sẽ này sẽ áp dụng được cho cả Blogspot và WordPress nên các bạn có thể áp dụng tốt cho BLog của mình nhé.

Mẫu nút bấm số 1

<a  href="https://f4vnn.com/" style="background: rgb(68, 68, 68); border: none; box-sizing: inherit; color: white; display: inline-block; font-family: &quot;Hammersmith One&quot;, Tahoma, Arial; font-size: 1.125rem; margin: 0px 0.3em 10px 0px; outline: 0px; padding: 0.4em 1.6em; text-decoration-line: none; text-transform: uppercase; transition: all 0.3s ease;" target="_blank">Blog Tips</a>

<span style="background-color: white; color: #404040; font-family: Arimo, Tahoma, Arial; font-size: 17px;">&nbsp;</span>

<a  href="https://giaiphap.f4vnn.com/" id="single-theme-download" style="background: rgb(26, 107, 178); border: none; box-sizing: inherit; color: white; display: inline-block; font-family: &quot;Hammersmith One&quot;, Tahoma, Arial; font-size: 1.125rem; margin: 0px 0.3em 10px 0px; padding: 0.4em 1.6em; text-decoration-line: none; text-transform: uppercase; transition: all 0.3s ease;">Game - App</a>

<span style="background-color: white; color: #404040; font-family: Arimo, Tahoma, Arial; font-size: 17px;">&nbsp;</span>

<a  href="https://acafull.f4vnn.com/" style="background: rgb(111, 196, 98); border: none; box-sizing: inherit; color: white; display: inline-block; font-family: &quot;Hammersmith One&quot;, Tahoma, Arial; font-size: 1.125rem; margin: 0.2em 0.3em 0px 0px; padding: 0.4em 1.6em; text-decoration-line: none; text-transform: uppercase; transition: all 0.3s ease;">Acapella Việt</a>

Mẫu nút bấm số 2

<a style="background-color: white;
border-radius: 2px; border: 1px solid #3b5998; box-sizing: border-box; color: #3b5998;
display: inline-block; font-family: Arial, sans-serif; font-size: 14px; line-height: 16.8px;
margin: 0px 3px 10px; padding: 10px 14px; text-decoration-line: none; transition: all 0.2s;" href="https://f4vnn.com" target="_blank" rel="noopener noreferrer">Blog Tips</a>
<span style="background-color: white;
 color: #636363; font-family: 'arial' , sans-serif; font-size: 16px;"> </span><a style="background-color: white;
border-radius: 2px; border: 1px solid #e95950; box-sizing: border-box;
color: #e95950; display: inline-block; font-family: Arial, sans-serif;
font-size: 14px; line-height: 16.8px; margin: 0px 3px 10px;
padding: 10px 14px; text-decoration-line: none; transition: all 0.2s;" href="https://giaiphap.f4vnn.com" target="_blank" rel="noopener noreferrer">Game - App</a>
<span style="background-color: white; color: #636363; font-family: 'arial' , sans-serif;
 font-size: 16px;"> </span><a  style="background-color: white; border-radius: 2px; border: 1px solid #00aced;
box-sizing: border-box; color: #00aced; display: inline-block;
font-family: Arial, sans-serif; font-size: 14px; line-height: 16.8px;
margin: 0px 3px 10px; padding: 10px 14px; text-decoration-line: none;
transition: all 0.2s;" href="https://acafull.f4vnn.com" target="_blank" rel="noopener noreferrer">Acapella Việt</a>

Mẫu nút bấm số 3

<a href="https://f4vnn.com"><span style="color: #ffffff; background: #2196f38f; box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12); padding: 0.5em 1em; display: inline-block; margin: 0.5em; margin-left: 0em !important;"><strong>Blog Tips</strong></span></a><a href="https://giaiphap.f4vnn.com"><span style="color: #ffffff; background: #00aecd94; box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12); padding: 0.5em 1em; display: inline-block; margin: 0.5em 0;"><strong>Game - App</strong></span></a>

Các bạn nhớ thay link và tên hiển thị nút nhé.

Hy vọng với hướng dẫn cách tạo button bằng html cho Blogspot và WordPress này sẽ có ích cho bạn. Chúc bạn thành công.

Bài Viết Cùng Chuyên Mục
Game & Apk Mod Acapella Việt Template BLogspot Liên Kết URL

Theo dõi trên