Inilah Simple Button Demo Dan Download

Diposkan oleh fezarzone April 06, 2018 Post a Comment

Simple Button Demo dan Download - Ok sudah cukup usang dalam beberapa hari ini aku jarang cek blog yang satu ini dan maaf kalau aku terlambat menjawab semua komentar anda.

Kali ini aku akan menyebarkan tips dan mencoba menjawab dari pertanyaan teman di blog ini, ok pribadi saja

Memasang button menyerupai yang dipakai blog ini cukuplah mudah, anda hanya perlu menambahkan instruksi CSS dan HTML di bawah ini :

Sebelumnya anda sudah memasang font awesome pada template, kalau belum silahkan tambahkan link dibawah ini sebelum </head>

<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>

Buka Template > Edit HTML > Terapkan instruksi di bawah ini sebelum </style>

.whitebutton {     margin: 20px auto;     padding: 20px 0;     width: 200px; }  .whitebutton a {     background: #fff;     color: #666;     display: block;     font-size: 17px;     font-weight: 700;     font-family: 'Arial',Verdana,sans-serif;     height: 50px;     line-height: 50px;     text-align: center;     text-decoration: none;     text-transform: uppercase;     width: 200px;     position: relative;     z-index: 2; }  .whitebutton a:before {     content: '\f019';     font-family: FontAwesome;     font-weight: normal;     padding: 8px;     margin-left: -12px;     margin-right: 6px; }  .whitebutton span {     background: #444;     color: #fff;     display: block;     font-size: 12px;     font-family: 'Arial', Verdana,sans-serif;     height: 40px;     line-height: 40px;     text-align: center;     width: 200px;     z-index: 1;     text-transform: uppercase;     font-weight: bold; }  .whitebutton .up {     background: #e25734;     margin: -25px auto;     opacity: 0;     border-radius: 0 0 5px 5px;     transform: translate(0,-50px);     transition: 350ms; }  .whitebutton .down {     margin: -30px auto;     opacity: 0;     border-radius: 5px 5px 0 0;     transform: translate(0,-50px);     transition: 350ms; }  .whitebutton .down:before {     content:'\f14a';     font-family: FontAwesome;     font-weight: normal;     margin-right: 6px;     color: #aaa; }  .whitebutton:hover .up {     opacity: 1;     transform: translate(0,0); }  .whitebutton:hover .down {     opacity: 1;     transform: translate(0,-90px); }  .whitebuttondemo {     margin: 20px auto;     padding: 20px 0;     width: 200px; }  .whitebuttondemo a {     background: #e25734;     color: #fff;     display: block;     font-size: 17px;     font-weight: 700;     font-family:'Arial',Verdana,sans-serif;     height: 50px;     line-height: 50px;     text-align: center;     text-decoration: none;     text-transform: uppercase;     width: 200px;     position: relative;     z-index: 2;     transition: 350ms; }  .whitebuttondemo a:before {     content:'\f002';     font-family: FontAwesome;     font-weight: normal;     padding: 8px;     margin-left: -12px;     margin-right: 6px; }  .whitebuttondemo a:hover {     color: #fff; }  .whitebuttondemo span {     background: #444;     color: #fff;     display: block;     font-size: 12px;     font-family: 'Arial', Verdana,sans-serif;     height: 40px;     line-height: 40px;     text-align: center;     width: 200px;     z-index: 1;     text-transform: uppercase;     font-weight: bold; }  .whitebuttondemo .up {     background: #444;     margin: -25px auto;     opacity: 0;     border-radius: 0 0 5px 5px;     transform: translate(0,-50px);     transition: 350ms; }  .whitebuttondemo:hover .up {     opacity: 1;     transform: translate(0,0); }

1. Bagi yang menggunakan Gunakan tag <br>

Terapkan HTML berikut di postingan pada tab HTML (bukan compose)

<div class="whitebuttondemo"> <a href="#" target="_blank">Demo</a><br> <span class="up">click to view</span></div> <br> <div class="whitebutton"> <a href="#" target="_blank">Download</a><br> <span class="up">click to begin</span><br> <span class="down">1.6MB .rar</span></div>

2. Bagi yang memakai Tekan "Enter" untuk baris baru

Terapkan HTML berikut di postingan pada tab HTML (bukan compose)

<div class="whitebuttondemo">       <a href="#">Demo</a>       <span class="up">click to begin</span>     </div>  <div class="whitebutton">       <a href="#">Download</a>       <span class="up">click to begin</span>       <span class="down">1.6MB .rar</span>     </div>

Kemudian isikan link tautan anda pada instruksi yang aku tandai "#", selesai.

Hasilnya akan tampil menyerupai di bawah ini

Demo
click to view

Download
click to begin
1.6MB .rar

Cukup gampang bukan, silahkan dikreasikan kembali dan selamat mencoba.

Source :

CSS HTML Tips Blogger