Tạo Button Download Cực Đẹp Chuẩn Responsive Cho Blogger

 


Nay lang thang trên mạng và lượm được cái này nên mang về chia sẻ tới các bạn cho vui

Làm tí demo đã nhỉ


Mã CSS


 /* Heading Font */
@font-face {font-family: 'Poppins';font-style: normal;font-weight: 700;font-display: swap;src: local('Poppins Bold'), local('Poppins-Bold'), url(https://fonts.gstatic.com/s/poppins/v13/pxiByp8kv8JHgFVrLCz7V1g.woff) format('woff'), url(https://fonts.gstatic.com/s/poppins/v13/pxiByp8kv8JHgFVrLCz7Z1xlFQ.woff2) format('woff2')}
.Blog .download-info{display:flex;align-items:center;margin:1.7em 0;padding:15px;border:2px solid #ebeced;border-radius:3px;font-size:13px}
.Blog .download-info .file-icon{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:50px;height:50px;padding:10px;border-radius:15px;color:#fefefe;background:#ebeced linear-gradient(225deg,#00dcc0 0,#005af0 75%);font-weight:700;font-family:Poppins, sans-serif}
.Blog .download-info .file-text{padding:0 12px;width:calc(100% - 150px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.Blog .download-info .file-link{flex-shrink:0;display:flex;font-size:11px;margin:0 0 0 auto;padding:6px 10px}
.Blog .download-info .file-link .m-icon{width:15px;height:15px}
.button{display:inline-flex;align-items:center;margin:15px 15px 15px 0;padding:10px 20px;outline:0;border:0;color:#fefefe !important;background-color:#005af0;border-radius:3px;font-size:13px;line-height:22px}
.m-icon.download{background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23161617" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="M3 17v3a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-3"/><polyline points="8 12 12 16 16 12"/><line x1="12" x2="12" y1="2" y2="16"/></svg>')}
.m-icon{display:inline-block;margin-right:12px;width:18px;height:18px;background-size:cover;background-repeat:no-repeat;background-position:center center}

Mã HTML


<div class='download-info'>
  <span class='file-icon'>Zip</span>
  <span class='file-text'>Đep-Tra-Chi-Co-The-La-QuangSangIT.zip</span>
  <a class='button file-link' href='//quangsangit.com' target='_blank' rel='noreferrer noopener'><i class='m-icon download'></i>Download</a>
</div>
Thay đổi nhưng phần tô xanh nội dung của bạn.

Lời kết

Nếu có gì thắc mắc thì bình luận ở bên dưới nhé. Chúc các bạn thành công

You may like these posts

5 Comments

  1. Nguyễn Lâm Blog
    Ở tranh chủ median UI có :v
    • Nguyễn Quang Sáng
      Đã nói đi lượm rồi
  2. Anh Trai Nắng
    Thế mà cũng có đc 1 bài thủ thuật :v
  3. বঙ্গ উইকি
    Is it work without mediun UI? 😴
    • Nguyễn Quang Sáng
      Yes Median UI
  1. Để chèn mã hay sử dụng: <i rel="pre">code_here</i>
  2. Để chèn một trích dẫn, hãy sử dụng: <b rel="quote">your_qoute</b>
  3. chèn ảnh, hãy sử dụng: <i rel="image">url_image_here</i>
Để lại bình luận theo chủ đề của bài viết, bình luận có Liên kết sẽ không được hiển thị.
Quản trị viên và tác giả blog có quyền hiển thị, xóa, đánh dấu spam, trên các nhận xét đã đăng
data-ad-format="link"