Related Post Dengan Fungsi CSS3 Ini Lebih Kepada Bentuk "Circle Goole Button"Penampilanya Juga Nampak Lebih Menonjol Kerana Dengan Efeknya.
1.Login Ke Blogger
2.Template’ > ‘Edit HTML > PROCEED > Expand Widget Templates
4.Cari Kode ]]></b:skin>
5.Copy Kode Dibawah Dan Pastekan Selepas Kode ]]></b:skin>
/* Bloggertrix */
.Btrix-item {
width: 150px;
height: 150px;
border-radius: 50%;
position: relative;
cursor: default;}
.Btrix-info-wrap,
.Btrix-info{
position: absolute;border: 1px solid #8D8D8D;margin-top: -1px;width: 150px;
height: 150px;
border-radius: 50%;}
.Btrix-info-wrap {
background: #07CFE0 url(../images/bg.jpg);
box-shadow:
0 0 0 20px rgba(255,255,255,0.2),
inset 0 0 3px rgba(115,114, 23, 0.8);
}
.Btrix-info > div {
display: block;position: absolute;width: 150px;height: 150px;
border-radius: 50%;
background-position: center center;
-webkit-backface-visibility: hidden; /*Just for webkit to have a smooth font*/
}
.Btrix-info .Btrix-info-front {
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
-ms-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}
.Btrix-info .Btrix-info-back {
opacity: 0;background: #07CFE0;pointer-events: none;
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-o-transform: scale(1.5);
-ms-transform: scale(1.5);
transform: scale(1.5);
-webkit-transition: all 0.4s ease-in-out 0.2s;
-moz-transition: all 0.4s ease-in-out 0.2s;
-o-transition: all 0.4s ease-in-out 0.2s;
-ms-transition: all 0.4s ease-in-out 0.2s;
transition: all 0.4s ease-in-out 0.2s;
}
.Btrix-img-1 {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizqk6WcuRHCneZbKc0C-Irxw0uqSQmNLvR4coMVqWPD8HgKjNUckPcu_c9XvfEyGv70ybW_9tVgozaDFMwKJVd9PCeRRMajtu5zsYV23gixjB6QCfl0o_Hl2rLUj7c6xwCHquMAkFHYVo/s1600/bloggertrix-image+1.jpg);}
.Btrix-img-2 {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgd6VfZeJAUHqSP2YA1xp2aVpl323hJpXJgtRm1E2OqQfhauTVWVngHM2j1hmbC7viLmwK-2lGlxjOZ3KBJNg8ZfVTAQlj88TZyG7TsG9cZ7SJMUJVjb9yg60Vyt6Writt3k0X9sRu2Qkk/s1600/bloggertrix-image+2.jpg);}
.Btrix-img-3 {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_lCbM7SzZQp8iBgfzSoa2ugBzZrmqaNPdVzjzh1KT2gNQuMObGmgRq6qM7JJm9b-2s7pPFHs89rXAh3ZLCRoXnDQLysXEHisblbpbBm94EJlglybFTzuW4l8au_zMkfRUCnhmg-_4nb8/s1600/bloggertrix-image+3.jpg);}
.Btrix-info h3 {
color: #fff;
text-transform: uppercase;letter-spacing: 2px;font-size: 16px;margin: -20px 15px;
padding: 40px 0 0 0;
height: 80px;
font-family: 'Open Sans', Arial, sans-serif;
text-shadow:
0 0 1px #fff,
0 1px 2px rgba(0,0,0,0.3);
}
.Btrix-info p {
color: #fff;
padding: 10px 5px 0;
font-style: italic;
margin: -60px 30px;
font-size: 12px;
border-top: 1px solid rgba(255,255,255,0.5);
}
.Btrix-info p a {
display: block;color: #e7615e;font-style: normal;
font-weight: 700;
text-transform: uppercase;
font-size: 9px;
letter-spacing: 1px;
padding-top: 4px;
font-family: 'Open Sans', Arial, sans-serif;
}
.Btrix-info p a:hover {
color: #fff;
}
.Btrix-item:hover .Btrix-info-front {
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
opacity: 0;
}
.Btrix-item:hover .Btrix-info-back {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
pointer-events: auto;}
.Btrix-grid {
margin: 20px 0 0 0;
padding: 0;
list-style: none;
display: block;
text-align: center;
width: 100%;}
.Btrix-grid:after,
.Btrix-item:before {
content: '';
display: table;}
.Btrix-grid:after {
clear: both;}
.Btrix-grid li {
width: 150px;
height: 150px;
display: inline-block;
margin: 4px;
}
7.Login Ke Blogger
8.Layout' > Add a Gadget' > 'HTML/Javascript
9.Copy Dan Pastekan Dalam Widget Anda
<section class="main">
<ul class="Btrix-grid">
<li>
<div class="Btrix-item Btrix-img-1">
<div class="Btrix-info-wrap">
<div class="Btrix-info">
<div class="Btrix-info-front Btrix-img-1"></div>
<div class="Btrix-info-back">
<h3>
Fashion</h3>
By Blogger Trix <a href="http://www.bloggertrix.com"><br/>Link to Post</a><br />
</div></div></div></div></li>
<li>
<div class="Btrix-item Btrix-img-2">
<div class="Btrix-info-wrap">
<div class="Btrix-info">
<div class="Btrix-info-front Btrix-img-2"></div>
<div class="Btrix-info-back">
<h3>
Nature</h3>
By Blogger Trix <a href="http://www.bloggertrix.com"><br/>Link to Post</a><br />
</div></div></div></div></li>
<li>
<div class="Btrix-item Btrix-img-3">
<div class="Btrix-info-wrap">
<div class="Btrix-info">
<div class="Btrix-info-front Btrix-img-3"></div>
<div class="Btrix-info-back">
<h3>
Car</h3>
By Blogger Trix <a href="http://www.bloggertrix.com"><br/>Link to Post</a><br />
</div></div></div></div></li></ul></section>
Merah Tukar Imej Anda
Purple Tukar Link Anda
Hijau Tukar Tajuk Anda Sila Kongsi Artikel Ini Dengan Kawan2 Anda,Berkongsi Itu Indah!!! Klik Butang Dibawah.
