huyện là thấy mấy chiếc button này bên cái template kia đẹp vãi nên bê lun về blog, thử chơi cơ mà lại thấy hợp phết. Mặc dù lụm về blog đã hơn cả năm, nay mới tình cờ phát hiện ra đống css này trong lúc sửa lại template.
Và thế là share lên đây cmn lun, một phần là để tránh bị lãng quên chiều thu đó mờ.
Xem demo trong ảnh hoặc kéo xuống dưới cùng để sờ trực tiếp nhé!
Bước 1: Chèn CSS dưới đây, nhớ là dán trước thẻ đóng ]]></b:skin>
.button,input.button{position:relative;display:inline-block;margin-right:1px;margin-bottom:4px;padding:0.60em 1em;border-bottom:none;-webkit-border-radius:0.333em;-moz-border-radius:0.333em;border-radius:0.333em;background-color:rgba(84,87,102,1);color:#FFFFFF!important;text-decoration:none!important;font-size:15px;line-height:1.714em!important;cursor:pointer}
.button,input.button{-webkit-transition:background-color 0.3s linear,color 0.3s linear;-moz-transition:background-color 0.3s linear,color 0.3s linear;transition:background-color 0.3s linear,color 0.3s linear}
.button:hover,input.button:hover{border-bottom:none;background-color:rgba(84,87,102,0.9)}
.button:active,input.button:active{box-shadow:inset 0 3px 1px rgba(0,0,0,0.1);-webkit-box-shadow:inset 0 3px 1px rgba(0,0,0,0.1);-moz-box-shadow:inset 0 3px 1px rgba(0,0,0,0.1)}
.button i{margin-right:0.667em;line-height:1em!important}
.button.red,input.button.red{background-color:rgba(253,104,91,1)}
.button.red:hover,input.button.red:hover{background-color:rgba(253,104,91,0.9)}
.button.orange,input.button.orange{background-color:rgba(250,111,87,1)}
.button.orange:hover,input.button.orange:hover{background-color:rgba(250,111,87,0.9)}
.button.yellow,input.button.yellow{background-color:rgba(254,205,94,1)}
.button.yellow:hover,input.button.yellow:hover{background-color:rgba(254,205,94,0.9)}
.button.green,input.button.green{background-color:rgba(161,210,110,1)}
.button.green:hover,input.button.green:hover{background-color:rgba(161,210,110,0.9)}
.button.mint,input.button.mint{background-color:rgba(79,206,173,1)}
.button.mint:hover,input.button.mint:hover{background-color:rgba(79,206,173,0.9)}
.button.aqua,input.button.aqua{background-color:rgba(85,193,231,1)}
.button.aqua:hover,input.button.aqua:hover{background-color:rgba(85,193,231,0.9)}
.button.blue,input.button.blue{background-color:rgba(96,158,234,1)}
.button.blue:hover,input.button.blue:hover{background-color:rgba(96,158,234,0.9)}
.button.purple,input.button.purple{background-color:rgba(171,148,233,1)}
.button.purple:hover,input.button.purple:hover{background-color:rgba(171,148,233,0.9)}
.button.pink,input.button.pink{background-color:rgba(234,137,191,1)}
.button.pink:hover,input.button.pink:hover{background-color:rgba(234,137,191,0.9)}
.button.white,input.button.white{background-color:rgba(255,255,255,1);color:#545766!important}
.button.white:hover,input.button.white:hover{background-color:rgba(255,255,255,0.9)}
.button.grey,input.button.grey{background-color:rgba(170,178,188,1)}
.button.grey:hover,input.button.grey:hover{background-color:rgba(170,178,188,0.9)}
.button.dark-grey,input.button.dark-grey{background-color:rgba(84,87,102,1)}
.button.dark-grey:hover,input.button.dark-grey:hover{background-color:rgba(84,87,102,0.9)}
.button.transparent,input.button.transparent{border:2px solid rgba(84,87,102,1);background-color:transparent;color:rgba(84,87,102,1)!important}
.button.transparent:hover,input.button.transparent:hover{border:2px solid rgba(84,87,102,1);background-color:rgba(84,87,102,1);color:#fff!important}
.button.transparent.red,input.transparent.button.red{border:2px solid rgba(253,104,91,1);color:rgba(253,104,91,1)!important}
.button.transparent.red:hover,input.button.transparent.red:hover{border:2px solid rgba(253,104,91,1);background-color:rgba(253,104,91,1);color:#fff!important}
.button.transparent.orange,input.transparent.button.orange{border:2px solid rgba(250,111,87,1);color:rgba(250,111,87,1)!important}
.button.transparent.orange:hover,input.button.transparent.orange:hover{border:2px solid rgba(250,111,87,1);background-color:rgba(250,111,87,1);color:#fff!important}
.button.transparent.yellow,input.transparent.button.yellow{border:2px solid rgba(254,205,94,1);color:rgba(254,205,94,1)!important}
.button.transparent.yellow:hover,input.button.transparent.yellow:hover{border:2px solid rgba(254,205,94,1);background-color:rgba(254,205,94,1);color:#fff!important}
.button.transparent.green,input.transparent.button.green{border:2px solid rgba(161,210,110,1);color:rgba(161,210,110,1)!important}
.button.transparent.green:hover,input.button.transparent.green:hover{border:2px solid rgba(161,210,110,1);background-color:rgba(161,210,110,1);color:#fff!important}
.button.transparent.mint,input.transparent.button.mint{border:2px solid rgba(79,206,173,1);color:rgba(79,206,173,1)!important}
.button.transparent.mint:hover,input.button.transparent.mint:hover{border:2px solid rgba(79,206,173,1);background-color:rgba(79,206,173,1);color:#fff!important}
.button.transparent.aqua,input.transparent.button.aqua{border:2px solid rgba(85,193,231,1);color:rgba(85,193,231,1)!important}
.button.transparent.aqua:hover,input.button.transparent.aqua:hover{border:2px solid rgba(85,193,231,1);background-color:rgba(85,193,231,1);color:#fff!important}
.button.transparent.blue,input.transparent.button.blue{border:2px solid rgba(96,158,234,1);color:rgba(96,158,234,1)!important}
.button.transparent.blue:hover,input.button.transparent.blue:hover{border:2px solid rgba(96,158,234,1);background-color:rgba(96,158,234,1);color:#fff!important}
.button.transparent.purple,input.transparent.button.purple{border:2px solid rgba(171,148,233,1);color:rgba(171,148,233,1)!important}
.button.transparent.purple:hover,input.button.transparent.purple:hover{border:2px solid rgba(171,148,233,1);background-color:rgba(171,148,233,1);color:#fff!important}
.button.transparent.pink,input.transparent.button.pink{border:2px solid rgba(234,137,191,1);color:rgba(234,137,191,1)!important}
.button.transparent.pink:hover,input.button.transparent.pink:hover{border:2px solid rgba(234,137,191,1);background-color:rgba(234,137,191,1);color:#fff!important}
.button.transparent.white,input.transparent.button.white{border:2px solid rgba(255,255,255,1);color:rgba(255,255,255,1)!important}
.button.transparent.white:hover,input.button.transparent.white:hover{border:2px solid rgba(255,255,255,1);background-color:rgba(255,255,255,1);color:#545766!important}
.button.transparent.grey,input.transparent.button.grey{border:2px solid rgba(170,178,188,1);color:rgba(170,178,188,1)!important}
.button.transparent.grey:hover,input.button.transparent.grey:hover{border:2px solid rgba(170,178,188,1);background-color:rgba(170,178,188,1);color:#fff!important}
.button.transparent.dark-grey,input.transparent.button.dark-grey{border:2px solid rgba(84,87,102,1);color:rgba(84,87,102,1)!important}
.button.transparent.dark-grey:hover,input.button.transparent.dark-grey:hover{border:2px solid rgba(84,87,102,1);background-color:rgba(84,87,102,1);color:#fff!important}Bước 2: Vào bài viết Blogspot > Chuyển sang Chế độ xem HTML > Chọn mấy chiếc code button dưới này vào trong bài viết của bạn. Thích cái nào lụm cái đó thui.
<a class="button" href="#">Button</a>
<a class="button red" href="#">Red Button</a>
<a class="button orange" href="#">Orange Button</a>
<a class="button green" href="#">Green Button</a>
<a class="button blue" href="#">Blue Button</a>
<a class="button purple" href="#">Purple Button</a>
<a class="button yellow" href="#">Yellow Button</a>
<a class="button mint" href="#">Mint Button</a>
<a class="button aqua" href="#">Aqua Button</a>
<a class="button pink" href="#">Pink Button</a>
<a class="button white" href="#">White Button</a>
<a class="button grey" href="#">Grey Button</a>
<a class="button dark-grey" href="#">Dark-Grey Button</a>
<a class="button transparent" href="#">Button</a>
<a class="button transparent red" href="#">Red Button</a>
<a class="button transparent orange" href="#">Orange Button</a>
<a class="button transparent green" href="#">Green Button</a>
<a class="button transparent blue" href="#">Blue Button</a>
<a class="button transparent purple" href="#">Purple Button</a>
<a class="button transparent yellow" href="#">Yellow Button</a>
<a class="button transparent mint" href="#">Mint Button</a>
<a class="button transparent aqua" href="#">Aqua Button</a>
<a class="button transparent pink" href="#">Pink Button</a>
<a class="button transparent grey" href="#">Grey Button</a>
<a class="button transparent dark-grey" href="#">Gark-Grey Button</a>
<a class="button" href="#"><i class="fa fa-bolt"></i>Button</a>
<a class="button red" href="#"><i class="fa fa-bookmark"></i>Red Button</a>
<a class="button orange" href="#"><i class="fa fa-cart-arrow-down"></i>Orange Button</a>
<a class="button green" href="#"><i class="fa fa-bars"></i>Green Button</a>
<a class="button blue" href="#"><i class="fa fa-cloud-download"></i>Blue Button</a>
<a class="button purple" href="#"><i class="fa fa-fighter-jet"></i>Purple Button</a>
<a class="button yellow" href="#"><i class="fa fa-external-link"></i>Yellow Button</a>
<a class="button mint" href="#"><i class="fa fa-gavel"></i>Mint Button</a>
<a class="button aqua" href="#"><i class="fa fa-life-ring"></i>Aqua Button</a>
<a class="button pink" href="#"><i class="fa fa-magic"></i>Pink Button</a>
<a class="button white" href="#"><i class="fa fa-location-arrow"></i>White Button</a>
<a class="button grey" href="#"><i class="fa fa-leaf"></i>Grey Button</a>
<a class="button dark-grey" href="#"><i class="fa fa-meh-o"></i>Dark-Grey Button</a>
<a class="button grey" href="#"><span><i aria-hidden="true" class="fa fa-eye"></i>Demo Template: Chitose2D</span></a>Nếu bạn chưa hình dung được trông nó như nào thì hãy xem trực tiếp bên dưới, vị trí theo thứ tự như trên code luôn nhá! 😗
Button Red Button Orange Button Green Button Blue Button Purple Button Yellow Button Mint Button Aqua Button Pink Button White Button Grey Button Dark-Grey Button Button Red Button Orange Button Green Button Blue Button Purple Button Yellow Button Mint Button Aqua Button Pink Button Grey Button Gark-Grey Button Button Red Button Orange Button Green Button Blue Button Purple Button Yellow Button Mint Button Aqua Button Pink Button White Button Grey Button Dark-Grey Button Demo Template: Chitose2D
Ok, đã xong rồi đó. Thực ra loại button này chỉ thích hợp với những bạn làm content chia sẻ thủ thuật lập trình, template, web tải game, phim các kiểu vân vân và mây mây thui, chứ blog mình nội dung chủ yếu là Anime/Manga/Light Novel nên méo có dịp dùng đến. 😁
Hashtag: Tạo Button đẹp và đơn giản cho Blogger/Blogspot
Không có nhận xét nào
Đăng nhận xét