Penulis 
Hai Sobat, tutorial di bawah ini akan menjelaskan Cara Membuat Tombol Demo dan Download dengan desain Flat UI (User Interface). Tombol ini biasanya di gunakan untuk share Game, File, Video,Template dan lainya.
Pengertian Flat UI "Flat User Interface Design is a minimalis UI Design Genre, or design language, currently used in various graphical user interfaces (such is Web sites or Applications)." - Wikipedia
Mudahnya, Flat UI adalah desain minimalis dengan bahasa desain yang menghilangkan efek 3D seperti gradient, tekstur, bayangan dan sejenisnya yang membuat desain menjadi 3D, jadi desain Flat UI nantinya terlihat seperti 2 dimensi dengan warna yang flat.
Baca juga : Cara Membuat Tombol Demo dan Download Material Design
Dengan menerapkan desain Flat UI ini akan membuat tampilan terlihat fresh dan mempengaruhi performa sehingga lebih mudah untuk di akses.
Cara Membuat Tombol Demo dan Download desain Flat UI
1. Tambahkan kode link CSS berikut di atas kode </head>
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel="stylesheet"/>
Berikut ini adalah demo Tombol Demo dan Download
Model 1
2. Masuk Blogger> Template> Edit HTML
3. Letakan kode CSS berikut ini di atas kode </style> atau ]]><b:skin>
Model 1
/* model flat ui 1 */
.button { float : left ; list-style : none ; text-align:center;width:160px;margin:10px;padding:2px;font-size:14px;clear:both}
.button ul {margin:0;padding:0}
.button li { display:inline;margin:5px;padding:0;list-style:none}
.button li a.demo,.button li a.download{position:relative;padding:9px 48px 9px 16px;background:#3498db;color:#fff !important ; font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;letter-spacing:0.5px;border-radius:3px;box-shadow:0 1px rgba(0,0,0,0.1);line-height:normal;transition:all .3s}
.button li a.download{background:#e74c3c}
.button li a.demo:hover,.button li a.download:hover{background:#666}
.button li a.demo:active,.button li a.download:active{cursor:pointer}
.button li a.after,.button li a.download:after{content:'\f135';bacground:rgba (0,0,0,0.1);position:absolute;right:0;top:0;font-weight:normal;display:inline-block;margin:0 0 0 10px;color:#fff;padding:11px;font-family:fontawesome}
.button li a.download:after{content:'\f019'}
Model 2
/* model flat ui 2 */
.button2{float:left;list-style:none;text-align:center;width:200px;margin:10px;padding:2px;font-size:14px;clear:both}
.button2 ul{margin:0;padding:0}
.button2 li{display:inline;margin:5px;padding:0;list-style:none}
.button2 li a.demo,.button2 li a.download{position:relative;padding:14px 48px 14px 16px;background:#3498db;display:block;color:#fff !important;font-weight:700;font-size:14px;text-align:left;text-transform:uppercase;letter-spacing:.2px;border-radius:3px;box-shadow:0 1px rgba(0,0,0,0.1);line-height:normal;transition:all .3s;max-width:200px;margin:auto;overflow:hidden}
.button2 li a.download{background:#e74c3c}
.button2 li a.demo:hover,.button2 li a.download:hover{background:#666}
.button2 li a.demo:active,.button2 li a.download:active{cursor:pointer}
.button2 li a.demo:after,.button2 li a.download:after{content:'\f054';background:rgba(0,0,0,0.1);position:absolute;right:0;top:0;font-weight:normal;display:inline-block;margin:0 0 0 10px;color:#fff;padding:16px 24px;font-family:fontawesome;transition:all .3s}
.button2 li:hover a.demo:after,.button2 li:hover a.download:after{background:transparent;-webkit-animaton:bounceright .3s alternate ease infinite;animation:bounceright .3s alternate ease infinite}
@webkit-keyframes bounceright{from{-webkit-transform:translateX(0)}to{-webkit-transform:translateX(3px)}}
@keyframes bounceright{from{transform:translateX(0)}to{transform:translateX(3px)}}
4. Simpan template
5. Gunakan kode berikut pada saat posting dan letakan pada mode HTML.
Model 1
<div style="text-align:center;"> <ul class="button"> <li><a class="demo" href="your url name" target="_blank">Demo</a></li> <li><a class="download" href="your url name" target"_blank">Download</a></li> </ul> </div> <div class="clear"></div>
Model 2
<div class="text-align:center;"> <ul class="button2"> <li><a class="demo" href="your url name" target="_blank">Demo Link</a></li> <li><a class="download" href="your url name" target="_blank">Download Link</a></li> </ul> </div> <div class="clear"></div>
"your url name" silahkan, di ganti dengan alamat URL blog sobat.
Sekian dulu sobat, apabila ada kesalahan dalam penulisan artikel diatas saya mohon maaf atau silahkan masukan komentar sebagai masukan, dan semoga bermanfaat.
Baca juga : Daftar Kode Warna Flat UI Design Terbaik
EmoticonEmoticon