Cara Membuat Tombol Download dan lainnya di blog seperti Arlina Design - ada yang pingin tombol - tombol kayak arlina design gak ?, pastinya ada dong.. nah kebetulan saya sekarang mau share tentang tombol - tombolnya. tombol yang digunakan pada arlina memang keren dan cerah, apalagi dikasih font awesome yang kecil itu, biasanya tombol ini digunakan untuk yang blognya tentang download software dan game. daripada lama lama langsung aja caranya dibawah ini.
Caranya:
1. Buka blog > Template > Edit template, masukkan kode CSS dibawah ini tepat sebelum kode ]]></b:skin> atau </style>
2. Lalu Simpan/* CSS Shortcodes */ dan /* Custom Button */ /* CSS Shortcodes */ .button{float:left;list-style:none;text-align:center;width:95%;margin:10px;padding:2px;clear:both;} .button ul {margin:0;padding:0} .button li{display:inline;margin:5px;padding:0;list-style:none;} .demo,.download {padding:12px 15px!important;color:#fff!important;font-weight:700;text-align:center;text-transform:uppercase;letter-spacing:0.5px;border-radius:3px;opacity:0.9;transition:all 0.3s ease-out;} .demo {background-color:#5a6269;} .download {background-color:#ff675c;} .demo:hover {background-color:#ff675c;color:#fff;opacity:1;} .download:hover {background-color:#5a6269;color:#fff;opacity:1;} .demo:before {content:'\f135';display:inline-block;font-weight:normal;vertical-align:top;margin-right:10px;width:16px;height:16px;line-height:24px;font-family:fontawesome;transition:all 0.5s ease-out;} .download:before {content:'\f019';display:inline-block;font-weight:normal;vertical-align:top;margin-right:10px;width:16px;height:16px;line-height:24px;font-family:fontawesome;transition:all 0.5s ease-out;} .first-letter{float:left;color:#f77c6a;font-size:75px;line-height:60px;padding-top:4px;padding-right:8px;padding-left:3px;font-family:Georgia} .widget .post-body ul,.widget .post-body ol{line-height:1.5;font-weight:400} .widget .post-body li{padding:0;line-height:1.5} .alert-message{position:relative;display:block;background-color:#f7f8fa;padding:20px;margin:20px 0;border-radius:2px;color:#39484d;} .alert-message p{margin:0!important;padding:0;line-height:22px;font-size:13px;color:#39484d} .alert-message span{font-size:14px!important} .alert-message i{font-size:22px;text-align:left;display:inline-block;position:absolute;right:0;top:0;padding:20px;opacity:0.8;} .alert-message.success{background-color:#00acd6;color:#fff} .alert-message.success a,.alert-message.success span{color:#fff} .alert-message.alert{background-color:#0073b7;color:#fff} .alert-message.alert a,.alert-message.alert span{color:#fff} .alert-message.warning{background-color:#efa666;color:#fff} .alert-message.warning a,.alert-message.warning span{color:#fff} .alert-message.error{background-color:#f56c7e;color:#fff} .alert-message.error a,.alert-message.error span{color:#fff} .fa-check-circle:before{content:"\f058"} .fa-info-circle:before{content:"\f05a"} .fa-exclamation-triangle:before{content:"\f071"} .fa-exclamation-circle:before{content:"\f06a"} #flippy {text-align:center;} #flippy button {margin:10px auto;cursor:pointer;font-weight:700;background-color:#5a6269;color:#fff;padding:10px 20px!important;text-transform:uppercase;border:none;border-radius:3px;opacity:0.9;transition:all 0.3s ease-out;} #flippy button:hover, #flippy button:focus {outline:none;opacity:1;color:#fff;} #flippanel {padding:1px;text-align:left;background:#fafafa;border:1px solid #e6e6e6;} #flippanel {padding:24px;display:none;} #flippanel img {background:#f5f5f5;margin:10px auto;} #wrap {margin:20px auto;text-align:center;} .btn{display:inline-block;position:relative;font-weight:700;background:#ff675c;padding:9px 18px;margin:0 3px;border-radius:3px;opacity:1;border:0;text-transform:uppercase;transition:all .3s ease-out;} .tombol.down {background:#4f5a60;} .tombol:hover,.btn:active {background:#ff857c;} .tombol.down:hover,.btn.down:active {background:#5c686f;} a.tombol {color:rgba(255,255,255,1);} a.tombol:hover,a.btn:active,a.btn.down:hover,a.btn.down:active{color:#fff;} .tombol i {margin-left:10px;font-weight:normal;font-family:FontAwesome;} .tombol.yudha {-webkit-animation: anim 2s ease-in infinite;animation: anim 2s ease-in infinite;} /* Custom Button */ a.yudha-btn{border:none;cursor:pointer;padding:10px 20px;display:inline-block;margin:15px;text-transform:uppercase;letter-spacing:1px;font-weight:700;outline:0;position:relative;border-radius:3px;transition:all .3s} a.yudha-btn:hover {-webkit-animation: anim 2s ease-in infinite;animation: anim 2s ease-in infinite;} a.yudha-btn:after {content: '';position:absolute;z-index:-1;transition:all .3s;} a.yudha-btn:before{font-family:Fontawesome;font-style:normal;font-weight:400;font-variant:normal} a.yudha-button{background:#4f93c5;color:#fff!important;overflow:hidden;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;backface-visibility:hidden} a.yudha-button:active {background:#4786b5;top:2px;} a.yudha-button span {display:inline-block;width:100%;height:100%;transition:all 0.3s;backface-visibility:hidden;} a.yudha-button:before{position:absolute;height:100%;width:100%;line-height:2.2;font-size:130%;transition:all .3s} a.yudha-button:active:before {color:#fff;} a.yudha-buttona:hover span {-webkit-transform: translateY(300%);-moz-transform: translateY(300%);-ms-transform: translateY(300%);transform: translateY(300%);} a.yudha-buttona:before {left:0;top:-110%;} a.yudha-buttona:hover:before {top:0;} a.icon-result:before {content: "\f061";} @-webkit-keyframes anim{5%{-webkit-transform:scale(1.1,.9);transform:scale(1.1,.9)}10%{-webkit-transform:scale(.9,1.1) translateY(-.5rem);transform:scale(.9,1.1) translateY(-.5rem)}15%{-webkit-transform:scale(1);transform:scale(1)}} @keyframes anim{5%{-webkit-transform:scale(1.1,.9);transform:scale(1.1,.9)}10%{-webkit-transform:scale(.9,1.1) translateY(-.5rem);transform:scale(.9,1.1) translateY(-.5rem)}15%{-webkit-transform:scale(1);transform:scale(1)}}
3. Kemudian pasang kode berikut di tempat yang ingin sobat pasang di widget, postingan, atau pun halaman untuk tombol button seperti ini.
<a class="yudha-btn yudha-button yudha-buttona icon-result" href="http://masafdo.blogspot.co.id/" rel="”nofollow”" target="_blank">Result</a></div>
Klik dimari
<div id="wrap"> <a class="btn" href="http://masafdo.blogspot.co.id/" rel="”nofollow”" target="_blank">Klik dimari</a><br />
<div id="wrap"><a href="http://masafdo.blogspot.co.id/" class="btn down" target="_blank" rel="nofollow">Download <i class="fa fa-download"></i></a><br /> </div><br />
<div id="wrap"> <a class="btn down anima" href="http://masafdo.blogspot.co.id/" target="_blank">Pesan <i class="fa fa-envelope-o"></i></a></div>
NOTE : Ganti http://masafdo.blogspot.co.id dengan Url yang kalian inginkan<div id="wrap"><a class="btn" href="http://masafdo.blogspot.co.id/" rel="nofollow" target="_blank">Demo <i class="fa fa-paper-plane"></i></a></div><br />
Gimana keren kan ? itulah cara Cara Membuat Tombol Download dan lainnya di blog seperti Arlina Design . semoga bermanfaat
