Chia sẻ Code Demo và Download CSS3 Button cho AMP Blogger

Chắc hẳn khi thiết kế trang web, các bạn hay sử dụng CSS để trang trí cho nó nhìn bắt mắt hơn. Và mình cũng không phải là ngoại lệ. Mình cũng sử dụng CSS rất nhiều để tạo hiệu ứng cho trang web mình đẹp hơn, sinh động hơn mà không cần phải sử dụng đến Javascript.

Trong bài viết này mình sử dụng CSS để tạo và làm hiệu ứng cho nút Demo và Download. Vì đây là giao diện AMP, nên khi làm code nó sẽ hơi rắc rối hơn. Suy nghĩ mãi mới thấy cái này đẹp và phù hợp nên dùng nó. Và giờ mình chia sẻ cho các bạn dùng luôn.

Bước 1: Bạn chèn code CSS này vào cặp thẻ <style>

a:active{position:relative;top:1px;left:1px}
#amp-button a[href^="http://"]:after,#amp-button a[href^="https://"]:after{content:'';background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgM7XdE6VUN6LyUI7XARS6TMzoS6KWRrO-10-f-yeMTSrO_-mfvQRv_nM4QrfXJT3urSCygrmFnn-Hm4OrpiGFCNdP2PC6wM1JzQVYTdYyuOGnTHSej5I15lX_pDEq2cJESZRGBhVE-5T8V/s1600/ic_star_border_white_24dp_2x.png)no-repeat;background-size: 18px 18px;width:18px;height:18px;display:inline-block;margin:0 0 3px 8px;vertical-align:middle}
#amp-button{text-align:center;}
#amp-button a{padding:10px 20px;color:#fff;text-align:center;border:0;cursor:pointer;border-radius:3px;display:inline-block;font-weight:500;-webkit-box-shadow:inset 0 -2px rgba(0,0,0,0.15);box-shadow:inset 0 -2px rgba(0,0,0,0.15);color:#fff;max-width:100px;line-height:30px;font-size:16px;text-transform: uppercase;margin-right:20px}
#amp-button a:hover{-webkit-box-shadow:inset 0 -54px rgba(0,0,0,0.15);box-shadow:inset 0 -54px rgba(0,0,0,0.15);color:#fff}
.blue{background:#3498db;}
.green{background:#2ecc71}
.red{background:#e74c3c}
.orange{background:#e8930c}
.purple{background:#9b59b6}
.yellow{background:#FFD600}
.pink{background:#F889EB}
.grey{background:#bdc3c7}
.turquoise{background:#1abc9c}
.midnight{background:#2c3e50}
.asbestos{background:#6d7b7c}
.dark{background:#454545}

Bước 2: Đây là cách thêm button:

<div id="amp-button">
<a href="" class="green" target="_blank" rel="nofollow">Demo</a><a href="" class="orange" target="_blank" rel="nofollow">Download</a></div> 

+ href: đường dẫn trang web
+ Bạn có thể thay đổi màu sắc cho nó sinh động theo các mẫu mình làm sẵn: blue, green, red, orange, purple, yellow, pink, grey, turquoise, midnight, asbestos, dark.

Xem thử nghiệm

Demo   Demo   Demo   Demo

Nguồn: wWw.chiasetools.com