Kênh Tên Miền chuyên cung cấp tên miền đẹp, giá rẻ! Hãy liên hệ kỹ thuật: 0914205579 - Kinh doanh: 0912191357 để được tư vấn, hướng dẫn miễn phí, Cảm ơn quý khách đã ủng hộ trong thời gian qua!
kiem tien, kiem tien online, kiem tien truc tuyen, kiem tien tren mang
Sunday, May 18, 2014

Nút download khá đẹp và đơn giản bằng CSS3 cho Blogger


Tạm gác lại thẻ lập trinh của Blogger qua một bên, hôm nay mình xin chia sẻ tới các bạn nút tải về (download) đơn giản và đẹp được làm bằng CSS3, các nút tải  về này có rất nhiều màu sắc khác nhau, bạn có thể tùy chọn cho website/blog của mình để bắt lấy cái nhìn của người dùng. Bạn có thể xem demo ngay dưới đây.



Tải về
Tải về






Tải về






Tải về






Tải về






Tải về


Do màu link mặc định của website mình màu cam nên không hợp với tông màu lắm, bạn có thể tùy chỉnh lại trong phần CSS.



Nút download khá đẹp và đơn giản bằng CSS3 cho Blogger

1. Đăng nhập vào Blogger >> Mẫu >> Chỉnh sửa HTML



Nút download khá đẹp và đơn giản bằng CSS3 cho Blogger


2. Tìm đến thẻ ]]></b:skin> và thêm đoạn CSS sau vào bên trên



Nút download khá đẹp và đơn giản bằng CSS3 cho Blogger


a.button {
color:#000;
position: relative;
height: 15px;
padding: 12px 20px 15px 68px;
cursor: pointer;
text-align: Right;
font-weight: bold;
font-size: 18px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 2px 2px 2px 0 rgba(0,0,0,.3);
-moz-box-shadow: 2px 2px 2px 0 rgba(0,0,0,.3);
box-shadow: 2px 2px 2px 0 rgba(0,0,0,.3);
display: inline-block !important;
font: 700 15px 'Arial', Helvetica, Clean, sans-serif;
margin: 0px 0px 20px 10px;
position: relative;
text-decoration: none;
transition: background-position .2s ease, margin .1s ease;
-webkit-transition: background-position .2s ease, margin .1s ease;
-moz-transition: background-position .2s ease, margin .1s ease;
background-repeat: repeat-x;
}

a.button:hover { background-position: 0 10px }

a.button:active {
-webkit-box-shadow: -1px -1px 2px 0 rgba(0,0,0,.3);
-moz-box-shadow: -1px -1px 2px 0 rgba(0,0,0,.3);
box-shadow: -1px -1px 2px 0 rgba(0,0,0,.3);
margin: 2px 0 20px 10px;
}

a.button span.bar {
width: 1px;
height: 30px;
position: absolute;
background: black;
top: 5px;
left: 50px;
}

a.button div.arrow {
position: absolute;
left: 20px;
top: 14px;
}

a.button div.arrow span.top {
position: absolute;
width: 6px;
height: 9px;
background: #000;
top: 0;
left: 3px;
}

a.button div.arrow span.bottom,
div.arrow span.bottomShadow {
position: absolute;
width: 0px;
height: 0px;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid black;
top: 9px;
left: -2px;
z-index: 2;
}

a.button div.arrow span.bottomShadow {
z-index: 1;
left: -1px;
}


/* GRAY
================================================== */

a.grey {
background-color: #888;
background-image: -webkit-linear-gradient(top, #888, #333);
background-image: -moz-linear-gradient(top, #888, #333);
background-image: -ms-linear-gradient(top, #888, #333);
background-image: -o-linear-gradient(top, #888, #333);
background-image: linear-gradient(top, #888, #333);
text-shadow: 1px 1px 1px rgba(255,255,255,.2);
border-top: 1px solid #aaa;
}

a.grey span.bar {
-webkit-box-shadow: 1px 1px 1px rgba(255,255,255,.2);
-moz-box-shadow: 1px 1px 1px rgba(255,255,255,.2);
box-shadow: 1px 1px 1px rgba(255,255,255,.2);
}

a.grey div.arrow span.top {
-webkit-box-shadow: 1px 1px 1px rgba(255,255,255,.2);
-moz-box-shadow: 1px 1px 1px rgba(255,255,255,.2);
box-shadow: 1px 1px 1px rgba(255,255,255,.2);
}

a.grey div.arrow span.bottomShadow { border-top: 8px solid rgba(255, 255, 255, 0.2) }

/* BLUE
================================================== */

a.blue {
background-color: #00aeef;
background-image: -webkit-linear-gradient(top, #00aeef, #00587a);
background-image: -moz-linear-gradient(top, #00aeef, #00587a);
background-image: -ms-linear-gradient(top, #00aeef, #00587a);
background-image: -o-linear-gradient(top, #00aeef, #00587a);
background-image: linear-gradient(top, #00aeef, #00587a);
text-shadow: 1px 1px 1px #23aaff;
border-top: 1px solid #23ccff;
}

a.blue span.bar {
-webkit-box-shadow: 1px 1px 1px #23aaff;
-moz-box-shadow: 1px 1px 1px #23aaff;
box-shadow: 1px 1px 1px #23aaff;
}

a.blue div.arrow span.top {
-webkit-box-shadow: 1px 1px 1px #23aaff;
-moz-box-shadow: 1px 1px 1px #23aaff;
box-shadow: 1px 1px 1px #23aaff;
}

a.blue div.arrow span.bottomShadow { border-top: 8px solid #23aaff }

/* GREEN
================================================== */

a.green {
background-color: #68c800;
background-image: -webkit-linear-gradient(top, #68c800, #367100);
background-image: -moz-linear-gradient(top, #68c800, #367100);
background-image: -ms-linear-gradient(top, #68c800, #367100);
background-image: -o-linear-gradient(top, #68c800, #367100);
background-image: linear-gradient(top, #68c800, #367100);
text-shadow: 1px 1px 1px #67c800;
border-top: 1px solid #67e800;
}

a.green span.bar {
-webkit-box-shadow: 1px 1px 1px #67c800;
-moz-box-shadow: 1px 1px 1px #67c800;
box-shadow: 1px 1px 1px #67c800;
}

a.green div.arrow span.top {
-webkit-box-shadow: 1px 1px 1px #67c800;
-moz-box-shadow: 1px 1px 1px #67c800;
box-shadow: 1px 1px 1px #67c800;
}

a.green div.arrow span.bottomShadow { border-top: 8px solid #67c800 }

/* RED
================================================== */

a.red {
background-color: #ee5f5b;
background-image: -webkit-linear-gradient(top, #ee5f5b, #973431);
background-image: -moz-linear-gradient(top, #ee5f5b, #973431);
background-image: -ms-linear-gradient(top, #ee5f5b, #973431);
background-image: -o-linear-gradient(top, #ee5f5b, #973431);
background-image: linear-gradient(top, #ee5f5b, #973431);
text-shadow: 1px 1px 1px #ed5d69;
border-top: 1px solid #ed8d69;
}

a.red span.bar {
-webkit-box-shadow: 1px 1px 1px #ed5d69;
-moz-box-shadow: 1px 1px 1px #ed5d69;
box-shadow: 1px 1px 1px #ed5d69;
}

a.red div.arrow span.top {
-webkit-box-shadow: 1px 1px 1px #ed5d69;
-moz-box-shadow: 1px 1px 1px #ed5d69;
box-shadow: 1px 1px 1px #ed5d69;
}

a.red div.arrow span.bottomShadow { border-top: 8px solid #ed5d69 }

/* ORANGE
================================================== */

a.orange {
background-color: #ff8636;
background-image: -webkit-linear-gradient(top, #ff8636, #9a3e00);
background-image: -moz-linear-gradient(top, #ff8636, #9a3e00);
background-image: -ms-linear-gradient(top, #ff8636, #9a3e00);
background-image: -o-linear-gradient(top, #ff8636, #9a3e00);
background-image: linear-gradient(top, #ff8636, #9a3e00);
text-shadow: 1px 1px 1px #ff7f42;
border-top: 1px solid #ffa542;
}

a.orange span.bar {
-webkit-box-shadow: 1px 1px 1px #ff7f42;
-moz-box-shadow: 1px 1px 1px #ff7f42;
box-shadow: 1px 1px 1px #ff7f42;
}

a.orange div.arrow span.top {
-webkit-box-shadow: 1px 1px 1px #ff7f42;
-moz-box-shadow: 1px 1px 1px #ff7f42;
box-shadow: 1px 1px 1px #ff7f42;
}

a.orange div.arrow span.bottomShadow { border-top: 8px solid #ff7f42 }

/* YELLOW
================================================== */

a.yellow {
background-color: #fcd116;
background-image: -webkit-linear-gradient(top, #fcd116, #705b00);
background-image: -moz-linear-gradient(top, #fcd116, #705b00);
background-image: -ms-linear-gradient(top, #fcd116, #705b00);
background-image: -o-linear-gradient(top, #fcd116, #705b00);
background-image: linear-gradient(top, #fcd116, #705b00);
text-shadow: 1px 1px 1px #ffc33d;
border-top: 1px solid #ffff3d;
}

a.yellow span.bar {
-webkit-box-shadow: 1px 1px 1px #ffc33d;
-moz-box-shadow: 1px 1px 1px #ffc33d;
box-shadow: 1px 1px 1px #ffc33d;
}

a.yellow div.arrow span.top {
-webkit-box-shadow: 1px 1px 1px #ffc33d;
-moz-box-shadow: 1px 1px 1px #ffc33d;
box-shadow: 1px 1px 1px #ffc33d;
}

a.yellow div.arrow span.bottomShadow { border-top: 8px solid #ffc33d }
3. Lưu lại giao diện hiện tại.



4. Khi đăng bài viết mới bạn chuyển san khung soạn thảo bằng HTML và sử dụng các đoạn mã như sau

<a class="button grey">
  <div class="arrow">
    <span class="top"></span>
    <span class="bottom"></span>
    <span class="bottomShadow"></span>
  </div>
  <span class="bar"></span>
  Tải về
</a>


<a class="button blue">
  <div class="arrow">
    <span class="top"></span>
    <span class="bottom"></span>
    <span class="bottomShadow"></span>
  </div>
  <span class="bar"></span>
  Tải về
</a>

<a class="button green">
  <div class="arrow">
    <span class="top"></span>
    <span class="bottom"></span>
    <span class="bottomShadow"></span>
  </div>
  <span class="bar"></span>
  Tải về
</a>

<a class="button red">
  <div class="arrow">
    <span class="top"></span>
    <span class="bottom"></span>
    <span class="bottomShadow"></span>
  </div>
  <span class="bar"></span>
  Tải về
</a>

<a class="button orange">
  <div class="arrow">
    <span class="top"></span>
    <span class="bottom"></span>
    <span class="bottomShadow"></span>
  </div>
  <span class="bar"></span>
  Tải về
</a>

<a class="button yellow">
  <div class="arrow">
    <span class="top"></span>
    <span class="bottom"></span>
    <span class="bottomShadow"></span>
  </div>
  <span class="bar"></span>
  Tải về
</a>
Như vậy là đã hoàn thành phần hướng dẫn của mình, mong rằng các bạn sẽ thích những nút làm bằng CSS3 này. Cám ơn bạn đã đọc bài viết!

0 comments:

Post a Comment

Popular Posts