کد گوگل پلاس در 4 استایل متفاوت (znt)

<style>

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400);

@import "//netdna.bootstrapcdn.com/font-awesome/3.0/css/font-awesome.css";

.button {

background: #DCE0E0;

position: relative;

display: block;

float: left;

height: 40px;

margin: 0 7px;

overflow: hidden;

width: 150px;

border-radius: 3px;

-o-border-radius: 3px;

-ms-border-radius: 3px;

-moz-border-radius: 3px;

-webkit-border-radius: 3px;

}

.icon {

display: block;

float: left;

position: relative;

z-index: 3;

height: 100%;

vertical-align: top;

width: 38px;

-moz-border-radius-topleft: 3px;

-moz-border-radius-topright: 0px;

-moz-border-radius-bottomright: 0px;

-moz-border-radius-bottomleft: 3px;

-webkit-border-radius: 3px 0px 0px 3px;

border-radius: 3px 0px 0px 3px;

text-align: center;

}

.icon i {

color: #fff;

line-height: 42px;

}

.zntboys {

z-index: 2;

display: block;

margin: 0;

height: 100%;

left: 38px;

position: absolute;

width: 112px;

-moz-border-radius-topleft: 0px;

-moz-border-radius-topright: 3px;

-moz-border-radius-bottomright: 3px;

-moz-border-radius-bottomleft: 0px;

-webkit-border-radius: 0px 3px 3px 0px;

border-radius: 0px 3px 3px 0px;

}

.zntboys p {

font-family: Open Sans;

font-weight: 400;

border-left: 1px solid #fff;

border-left: 1px solid rgba(255,255,255,0.35);

color: #fff;

font-size: 16px;

left: 0;

margin: 0;

position: absolute;

text-align: center;

top: 10px;

width: 100%;

}

.button .zntboys {

-webkit-transition: all 0.2s ease-in-out;

-moz-transition: all 0.2s ease-in-out;

-ms-transition: all 0.2s ease-in-out;

-o-transition: all 0.2s ease-in-out;

transition: all 0.2s ease-in-out;

}

.google1 #___plusone_0 {

width: 70px !important;

top: 10px;

right: 15px;

position: absolute;

display: block;

z-index: 1;

}

.google1:hover .zntboys {

bottom: -40px;

}

.google1 .icon, .google1 .zntboys {

background: rgba(248,80,50,1);

background: -moz-linear-gradient(top, rgba(248,80,50,1) 0%, rgba(241,111,92,1) 50%, rgba(246,41,12,1) 51%, rgba(240,47,23,1) 71%, rgba(231,56,39,1) 100%);

background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(248,80,50,1)), color-stop(50%, rgba(241,111,92,1)), color-stop(51%, rgba(246,41,12,1)), color-stop(71%, rgba(240,47,23,1)), color-stop(100%, rgba(231,56,39,1)));

background: -webkit-linear-gradient(top, rgba(248,80,50,1) 0%, rgba(241,111,92,1) 50%, rgba(246,41,12,1) 51%, rgba(240,47,23,1) 71%, rgba(231,56,39,1) 100%);

background: -o-linear-gradient(top, rgba(248,80,50,1) 0%, rgba(241,111,92,1) 50%, rgba(246,41,12,1) 51%, rgba(240,47,23,1) 71%, rgba(231,56,39,1) 100%);

background: -ms-linear-gradient(top, rgba(248,80,50,1) 0%, rgba(241,111,92,1) 50%, rgba(246,41,12,1) 51%, rgba(240,47,23,1) 71%, rgba(231,56,39,1) 100%);

background: linear-gradient(to bottom, rgba(248,80,50,1) 0%, rgba(241,111,92,1) 50%, rgba(246,41,12,1) 51%, rgba(240,47,23,1) 71%, rgba(231,56,39,1) 100%);

filter: progidXImageTransform.Microsoft.gradient( startColorstr='#f85032', endColorstr='#e73827', GradientType=0 );

}

</style>

<div class="google1 button"style="position:fixed;top:100px;">

<i class="icon">

<i class="icon-google-plus">

</i>

</i>

<div class="zntboys">

<p>

google+

</p>

</div>

<!-- Place this tag where you want the +1 button to render. -->

<div class="g-plusone" data-size="medium">

</div>

<script type="text/javascript">

(function() {

var po = document.createElement('script');

po.type = 'text/javascript';

po.async = true;

po.src = 'https://apis.google.com/js/plusone.js';

var s = document.getElementsByTagName('script')[0];

s.parentNode.insertBefore(po, s);

}

)();

</script>

</div>

</div>

<style>

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400);

@import "//netdna.bootstrapcdn.com/font-awesome/3.0/css/font-awesome.css";

.button {

background: #DCE0E0;

position: relative;

display: block;

float: left;

height: 40px;

margin: 0 7px;

overflow: hidden;

width: 150px;

border-radius: 3px;

-o-border-radius: 3px;

-ms-border-radius: 3px;

-moz-border-radius: 3px;

-webkit-border-radius: 3px;

}

.icon {

display: block;

float: left;

position: relative;

z-index: 3;

height: 100%;

vertical-align: top;

width: 38px;

-moz-border-radius-topleft: 3px;

-moz-border-radius-topright: 0px;

-moz-border-radius-bottomright: 0px;

-moz-border-radius-bottomleft: 3px;

-webkit-border-radius: 3px 0px 0px 3px;

border-radius: 3px 0px 0px 3px;

text-align: center;

}

.icon i {

color: #fff;

line-height: 42px;

}

.zntboys {

z-index: 2;

display: block;

margin: 0;

height: 100%;

left: 38px;

position: absolute;

width: 112px;

-moz-border-radius-topleft: 0px;

-moz-border-radius-topright: 3px;

-moz-border-radius-bottomright: 3px;

-moz-border-radius-bottomleft: 0px;

-webkit-border-radius: 0px 3px 3px 0px;

border-radius: 0px 3px 3px 0px;

}

.zntboys p {

font-family: Open Sans;

font-weight: 400;

border-left: 1px solid #fff;

border-left: 1px solid rgba(255,255,255,0.35);

color: #fff;

font-size: 16px;

left: 0;

margin: 0;

position: absolute;

text-align: center;

top: 10px;

width: 100%;

}

.button .zntboys {

-webkit-transition: all 0.2s ease-in-out;

-moz-transition: all 0.2s ease-in-out;

-ms-transition: all 0.2s ease-in-out;

-o-transition: all 0.2s ease-in-out;

transition: all 0.2s ease-in-out;

}

.google2 #___plusone_0 {

width: 70px !important;

top: 10px;

right: 15px;

position: absolute;

display: block;

z-index: 1;

}

.google2:hover .zntboys {

left: 150px;

}

.google2 .icon, .google2 .zntboys {

background: rgba(179,220,237,1);

background: -moz-linear-gradient(top, rgba(179,220,237,1) 0%, rgba(41,184,229,1) 50%, rgba(188,224,238,1) 100%);

background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(179,220,237,1)), color-stop(50%, rgba(41,184,229,1)), color-stop(100%, rgba(188,224,238,1)));

background: -webkit-linear-gradient(top, rgba(179,220,237,1) 0%, rgba(41,184,229,1) 50%, rgba(188,224,238,1) 100%);

background: -o-linear-gradient(top, rgba(179,220,237,1) 0%, rgba(41,184,229,1) 50%, rgba(188,224,238,1) 100%);

background: -ms-linear-gradient(top, rgba(179,220,237,1) 0%, rgba(41,184,229,1) 50%, rgba(188,224,238,1) 100%);

background: linear-gradient(to bottom, rgba(179,220,237,1) 0%, rgba(41,184,229,1) 50%, rgba(188,224,238,1) 100%);

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3dced', endColorstr='#bce0ee', GradientType=0 );

}

</style>

<div class="google2 button"style="position:fixed;top:100px;">

<i class="icon">

<i class="icon-google-plus">

</i>

</i>

<div class="zntboys">

<p>

google+

</p>

</div>

<!-- Place this tag where you want the +1 button to render. -->

<div class="g-plusone" data-size="medium">

</div>

<script type="text/javascript">

(function() {

var po = document.createElement('script');

po.type = 'text/javascript';

po.async = true;

po.src = 'https://apis.google.com/js/plusone.js';

var s = document.getElementsByTagName('script')[0];

s.parentNode.insertBefore(po, s);

}

)();

</script>

</div>

</div>

<style>

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400);

@import "//netdna.bootstrapcdn.com/font-awesome/3.0/css/font-awesome.css";

.button {

background: #DCE0E0;

position: relative;

display: block;

float: left;

height: 40px;

margin: 0 7px;

overflow: hidden;

width: 150px;

border-radius: 3px;

-o-border-radius: 3px;

-ms-border-radius: 3px;

-moz-border-radius: 3px;

-webkit-border-radius: 3px;

}

.icon {

display: block;

float: left;

position: relative;

z-index: 3;

height: 100%;

vertical-align: top;

width: 38px;

-moz-border-radius-topleft: 3px;

-moz-border-radius-topright: 0px;

-moz-border-radius-bottomright: 0px;

-moz-border-radius-bottomleft: 3px;

-webkit-border-radius: 3px 0px 0px 3px;

border-radius: 3px 0px 0px 3px;

text-align: center;

}

.icon i {

color: #fff;

line-height: 42px;

}

.zntboys {

z-index: 2;

display: block;

margin: 0;

height: 100%;

left: 38px;

position: absolute;

width: 112px;

-moz-border-radius-topleft: 0px;

-moz-border-radius-topright: 3px;

-moz-border-radius-bottomright: 3px;

-moz-border-radius-bottomleft: 0px;

-webkit-border-radius: 0px 3px 3px 0px;

border-radius: 0px 3px 3px 0px;

}

.zntboys p {

font-family: Open Sans;

font-weight: 400;

border-left: 1px solid #fff;

border-left: 1px solid rgba(255,255,255,0.35);

color: #fff;

font-size: 16px;

left: 0;

margin: 0;

position: absolute;

text-align: center;

top: 10px;

width: 100%;

}

.button .zntboys {

-webkit-transition: all 0.2s ease-in-out;

-moz-transition: all 0.2s ease-in-out;

-ms-transition: all 0.2s ease-in-out;

-o-transition: all 0.2s ease-in-out;

transition: all 0.2s ease-in-out;

}

.google3 #___plusone_0 {

width: 70px !important;

top: 10px;

right: 15px;

position: absolute;

display: block;

z-index: 1;

}

.google3:hover .zntboys {

top: -40px;

}

.google3 .icon, .google3 .zntboys {

background: rgba(179,252,119,1);

background: -moz-linear-gradient(top, rgba(179,252,119,1) 0%, rgba(31,59,8,1) 100%);

background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(179,252,119,1)), color-stop(100%, rgba(31,59,8,1)));

background: -webkit-linear-gradient(top, rgba(179,252,119,1) 0%, rgba(31,59,8,1) 100%);

background: -o-linear-gradient(top, rgba(179,252,119,1) 0%, rgba(31,59,8,1) 100%);

background: -ms-linear-gradient(top, rgba(179,252,119,1) 0%, rgba(31,59,8,1) 100%);

background: linear-gradient(to bottom, rgba(179,252,119,1) 0%, rgba(31,59,8,1) 100%);

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3fc77', endColorstr='#1f3b08', GradientType=0 );

}

</style>

<div class="google3 button"style="position:fixed;top:100px;">

<i class="icon">

<i class="icon-google-plus">

</i>

</i>

<div class="zntboys">

<p>

google+

</p>

</div>

<!-- Place this tag where you want the +1 button to render. -->

<div class="g-plusone" data-size="medium">

</div>

<script type="text/javascript">

(function() {

var po = document.createElement('script');

po.type = 'text/javascript';

po.async = true;

po.src = 'https://apis.google.com/js/plusone.js';

var s = document.getElementsByTagName('script')[0];

s.parentNode.insertBefore(po, s);

}

)();

</script>

</div>

</div>

<style>

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400);

@import "//netdna.bootstrapcdn.com/font-awesome/3.0/css/font-awesome.css";

.button {

background: #DCE0E0;

position: relative;

display: block;

float: left;

height: 40px;

margin: 0 7px;

overflow: hidden;

width: 150px;

border-radius: 3px;

-o-border-radius: 3px;

-ms-border-radius: 3px;

-moz-border-radius: 3px;

-webkit-border-radius: 3px;

}

.icon {

display: block;

float: left;

position: relative;

z-index: 3;

height: 100%;

vertical-align: top;

width: 38px;

-moz-border-radius-topleft: 3px;

-moz-border-radius-topright: 0px;

-moz-border-radius-bottomright: 0px;

-moz-border-radius-bottomleft: 3px;

-webkit-border-radius: 3px 0px 0px 3px;

border-radius: 3px 0px 0px 3px;

text-align: center;

}

.icon i {

color: #fff;

line-height: 42px;

}

.zntboys {

z-index: 2;

display: block;

margin: 0;

height: 100%;

left: 38px;

position: absolute;

width: 112px;

-moz-border-radius-topleft: 0px;

-moz-border-radius-topright: 3px;

-moz-border-radius-bottomright: 3px;

-moz-border-radius-bottomleft: 0px;

-webkit-border-radius: 0px 3px 3px 0px;

border-radius: 0px 3px 3px 0px;

}

.zntboys p {

font-family: Open Sans;

font-weight: 400;

border-left: 1px solid #fff;

border-left: 1px solid rgba(255,255,255,0.35);

color: #fff;

font-size: 16px;

left: 0;

margin: 0;

position: absolute;

text-align: center;

top: 10px;

width: 100%;

}

.button .zntboys {

-webkit-transition: all 0.2s ease-in-out;

-moz-transition: all 0.2s ease-in-out;

-ms-transition: all 0.2s ease-in-out;

-o-transition: all 0.2s ease-in-out;

transition: all 0.2s ease-in-out;

}

.google4 #___plusone_0 {

width: 70px !important;

top: 10px;

right: 15px;

position: absolute;

display: block;

z-index: 1;

}

.google4:hover .zntboys {

left: -150px;

}

.google4 .icon, .google4 .zntboys {

background: rgba(223,191,255,1);

background: -moz-linear-gradient(top, rgba(223,191,255,1) 0%, rgba(82,20,133,1) 100%);

background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(223,191,255,1)), color-stop(100%, rgba(82,20,133,1)));

background: -webkit-linear-gradient(top, rgba(223,191,255,1) 0%, rgba(82,20,133,1) 100%);

background: -o-linear-gradient(top, rgba(223,191,255,1) 0%, rgba(82,20,133,1) 100%);

background: -ms-linear-gradient(top, rgba(223,191,255,1) 0%, rgba(82,20,133,1) 100%);

background: linear-gradient(to bottom, rgba(223,191,255,1) 0%, rgba(82,20,133,1) 100%);

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dfbfff', endColorstr='#521485', GradientType=0 );

}

</style>

<div class="google4 button"style="position:fixed;top:100px;">

<i class="icon">

<i class="icon-google-plus">

</i>

</i>

<div class="zntboys">

<p>

google+

</p>

</div>

<!-- Place this tag where you want the +1 button to render. -->

<div class="g-plusone" data-size="medium">

</div>

<script type="text/javascript">

(function() {

var po = document.createElement('script');

po.type = 'text/javascript';

po.async = true;

po.src = 'https://apis.google.com/js/plusone.js';

var s = document.getElementsByTagName('script')[0];

s.parentNode.insertBefore(po, s);

}

)();

</script>

</div>

</div>