News!Bagikan artikel kami melalui sosialitamu, dan dapatkan kebaikan kebaikan seperti; kesehatan, rezeki, umur panjang yang barokah, terpelihara dari bala' dan penyakit akut, dll. Tentunya dari jalan yang tidak disangka-sangka.

Follow Us

Saturday, April 15, 2017

Tombol Cantik

gusmuluk
Bagikan melalui WhatsApp
semoga menjadi ilmu yang bermanfaat untuk orang banyak.




SEBELUM b:/skinn

#wrap { margin:20px auto; text-align:center; }

#wrap br { display:none; }

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

.bie-slide2 { border:2px solid #36D7B7; }

.bie-slide:hover { background-color:#F9690E; }

.bie-slide2:hover { background-color:#36D7B7; }

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

.bie-slide2:hover span.circle2 { color:#36D7B7; }

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

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

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

.bie-slide2 span.circle2 { background-color:#36D7B7; }

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

.bie-slide2 span.title2,.bie-slide2 span.title-hover2 { color:#36D7B7; left:80px; }

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

.bie-slide span.title-hover,.bie-slide2 span.title-hover2 { color:#fff; }


SEBELUM </head>

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



WIDGET / POST

<div id="wrap" style="text-align: center;">

<a class="bie-slide" href="#" target="_blank">

  <span class="circle"><i class="fa fa-rocket"></i></span>

  <span class="title">Demo</span>

  <span class="title-hover">Click here</span>

</a>

<a class="bie-slide2" href="#" target="_blank">

  <span class="circle2"><i class="fa fa-download"></i></span>

  <span class="title2">Download</span>

  <span class="title-hover2">Click here</span>

</a>

</div>


Bagikan : Facebook | Twitter | WhatsApp

google+

linkedin

previous
« Prev Post
Author Image

gusmuluk
Santri Lampung


ADVERTISMEN

Riset Ilmiyah SantriLampung

Open
santrilampung.com

Saran Baca untuk Anda


Baca juga khasanah TheSantri berikut
BARANG KALI INGIN MENTRAKTIR CREATOR DENGAN SECANGKIR KOPI DAN SEPOTONG BAKWAN SILAHKAN TRANSFER MELALUI REKENING MANDIRI BERIKUT. SEMOGA ALLAH MEMBALAS DENGAN YANG LEBIH BAIK.

Saklar Jiwa Lentera Hati

Pengantar Mencapai Pencerahan Jiwa. Ayo Tafakur Tingkatkan Keimananmu disini
Open