Bộ sưu tập nút bấm đẹp bằng HTML and CSS Button Styles

Bộ sưu tập nút bấm đẹp bằng HTML and CSS Button Styles

Chào các bạn hôm nay Vinadomain chia sẻ đến mọi người bộ sưu tập nút bấm đẹp bằng HTML and CSS Buttons Style khá đẹp, dễ dàng chèn ở nhiều vị trí như trong bài viết, text widget,…

#01 Bộ sưu tập nút bấm từ Themezee

Bạn nào vào themezee thì sẽ thấy nó khi xem chi tiết một cái theme, ở thời điểm hiện tại thì các nút bấm nó như thế này này. Mời anh em tham khảo và dùng thử

Đây là code của nút bấm thuần HTML và CSS, anh em dán nó vào bài viết ở chế độ Text (trên WordPress) nhé !

<a href=”#” 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”>THEME DEMO</a>

<span style=”background-color: white; color: #404040; font-family: Arimo, Tahoma, Arial; font-size: 17px;”>&nbsp;</span><a href=”#” 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;”>DOWNLOAD THEME</a>

<span style=”background-color: white; color: #404040; font-family: Arimo, Tahoma, Arial; font-size: 17px;”>&nbsp;</span><a href=”#” 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;”>VIEW PRO VERSION</a>

#02 Nút bấm liên kết mạng xã hội từ Thuthuatios.com

Cái này nó có phần giới thiệu về tác giả bài viết, mẫu này anh em có thể ngâm cứu thêm để cho nó vào khung tác giả bài viết hoặc là các nút nhấn dành cho project như demo, dowload, view sourse,..

Yêu thích iOS và là tín đồ của Apple. Thích chia sẻ những thứ mình biết, đam mê làm web và xem tin tức công nghệ.

Cũng khá đẹp đúng không nào, nhưng mà nó không lấy được mấy cái hiệu ứng với icon mạng xã hội. Nhưng không sao, cái này cũng làm được nhiều nút bấm hay ho rồi.

Đây là code của em nó:

<span style=”background-color: white; box-sizing: border-box; color: #000000; display: block;
font-family: arial, sans-serif; font-size: 20px; font-weight: bold; line-height: 20px;
margin-bottom: 14px;”>VNV</span>

<div style=”background-color: white; box-sizing: border-box; color: #4e565d;
font-family: Arial, sans-serif; font-size: 16px; line-height: 21px;
margin-bottom: 15px;”><span style=”color: #008000;”>Yêu thích iOS và là tín đồ của Apple.
Thích chia sẻ những thứ mình biết, đam mê làm web và xem tin tức công nghệ.</span></div>

<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=”#” target=”_blank” rel=”noopener noreferrer”>Facebook</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=”#” target=”_blank” rel=”noopener noreferrer”>Instagram</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=”#” target=”_blank” rel=”noopener noreferrer”>Twitter</a>

#03 Nút bấm chuyên mục con

Đây là code để anh em chèn vào, nó có 2 nút, nếu xài hai cái thì thôi còn xài một cái thì bạn chuyển sang chế độ soạn thảo trực quan (visual) |>> bôi đen nút đó bấm delete là được.

<a href=”#”><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>HTML Cơ Bản</strong></span></a><a href=”#”><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>CSS Cơ Bản</strong></span></a>

Related Post

Leave a Reply

Your email address will not be published. Required fields are marked *