Bions And Friend

  • About
  • ADVERTISE
  • Contact
  • F.A.Q
  • Update

Simple Button Demo dan Download


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

Kali ini saya akan berbagi tips dan mencoba menjawab dari pertanyaan teman di blog ini, ok langsung saja

Memasang button seperti yang digunakan blog ini cukuplah mudah, anda hanya perlu menambahkan kode CSS dan HTML di bawah ini :


Sebelumnya anda sudah memasang font awesome pada template, jika 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 kode 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 menggunakan 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 kode yang saya tandai "#", selesai.

Hasilnya akan tampil seperti di bawah ini

Demo
click to view

Download
click to begin
1.6MB .rar



Cukup mudah bukan, silahkan dikreasikan kembali dan selamat mencoba.


Source : http://arlinadesign.blogspot.com/2014/11/simple-button-demo-dan-download.html

  • Share This:  
  •  Facebook
  •  Twitter
  •  Google+
  •  Stumble
  •  Digg
Newer Post Older Post Home
demo pesan

Pageviews last month

Popular Posts

  • EDGELESS - Facebook Twitter Blog Bounty
    edgeless.io   Earn EDG tokens by participating in EDGELESS bounty program There are 10 000 000 EDG tokens provided for Edgeless ...
  • Exchange Union Coin [XUC]
      XUC will be available through a crowd sale open to the community   WEBSITE   WHITPAPER   The crowd sale will run from Aug 7th - Aug...
  • EDGELESS - FAQ
    WEB | SLACK |  TELEGRAM | BLOG | TWITTER | FACEBOOK | REDDIT | QQ | GITHUB Q: What is Edgeless ...
  • ChronoBank
    What is chronobank.io ? ChronoBank.io is an ambitious and wide-ranging blockchain project, aimed at disrupting the HR/recruitment/fin...
  • PROJECT EDGELESS
    Online gambling has become more and more popular these days. There are so many websites on the internet that offer online gambling se...

b͡ack aswibions™ ©