Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / Blogger

Cara Membuat Tombol Demo dan Download Flat UI

Posting Komentar


Cara Membuat Tombol Demo dan Download Flat UI dengan Efek Side Bar - Pada
hari ini SkakCak akan berbagi tutorial Cara Membuat Tombol Demo dan Download Flat UI dengan Efek Side Bar. Untuk sobat yang biasa membagikan sesuatu melalui blog baik itu berbagi template, software, film, dan hal lain yang dapat dibagikan pastinya akan membutuhkan tombol demo dan download. Tampilan tomobl demo dan download yang akan saya bagikan ini sangat menarik, karena terdapat icon Font Awesome. Selain itu juga disertai dengan efek sidebar.

Ok tanpa berlama-lama lagi langsung saja sobat ikuti langkah- langkah di bawah ini :
1. Masuk ke Blogger > Template > Edit HTML
2. pastikan di blog ana terdapat script pemanggil CSS style seperti di bawah ini yang terletak      di atas kode </head>. jika tidak ada letakkan script pemanggil CSS style dibawan ini diatas code<head>.
3. letakkan kode css dibawah ini diatas kode ]]></b:skin>atau </style>
#wrap {
    margin: 20px auto;
    text-align: center;
}

#wrap br {
    display: none;
}

.btn-slide, .btn-slide2 {
    position: relative;
    display: inline-block;
    height: 50px;
    width: 200px;
    line-height: 50px;
    padding: 0;
    border-radius: 50px;
    background: #fdfdfd;
    border: 2px solid #0099cc;
    margin: 10px;
    transition: .5s;
}

.btn-slide2 {
    border: 2px solid #efa666;
}

.btn-slide:hover {
    background-color: #0099cc;
}

.btn-slide2:hover {
    background-color: #efa666;
}

.btn-slide:hover span.circle, .btn-slide2:hover span.circle2 {
    left: 100%;
    margin-left: -45px;
    background-color: #fdfdfd;
    color: #0099cc;
}

.btn-slide2:hover span.circle2 {
    color: #efa666;
}

.btn-slide:hover span.title, .btn-slide2:hover span.title2 {
    left: 40px;
    opacity: 0;
}

.btn-slide:hover span.title-hover, .btn-slide2:hover span.title-hover2 {
    opacity: 1;
    left: 40px;
}

.btn-slide span.circle, .btn-slide2 span.circle2 {
    display: block;
    background-color: #0099cc;
    color: #fff;
    position: absolute;
    float: left;
    margin: 5px;
    line-height: 42px;
    height: 40px;
    width: 40px;
    top: 0;
    left: 0;
    transition: .5s;
    border-radius: 50%;
}

.btn-slide2 span.circle2 {
    background-color: #efa666;
}

.btn-slide span.title,
  .btn-slide span.title-hover, .btn-slide2 span.title2,
  .btn-slide2 span.title-hover2 {
    position: absolute;
    left: 90px;
    text-align: center;
    margin: 0 auto;
    font-size: 16px;
    font-weight: bold;
    color: #30abd5;
    transition: .5s;
}

.btn-slide2 span.title2,
  .btn-slide2 span.title-hover2 {
    color: #efa666;
    left: 80px;
}

.btn-slide span.title-hover, .btn-slide2 span.title-hover2 {
    left: 80px;
    opacity: 0;
}

.btn-slide span.title-hover, .btn-slide2 span.title-hover2 {
    color: #fff;
}
4. Simpan Template
5. Langkah selanjutnya, untuk kode pemanggil silahkan terapkan pada postingan tab HTML 



  
  Demo
  Click here


  
  Download
  Click here
6.Selesai dibawah ini adalah demonya !

Posting Komentar untuk "Cara Membuat Tombol Demo dan Download Flat UI"