<!--CSS-Fox Favorite Fox Badge-->

<style type="text/css">

#css-fox-favorite-fox-badge-left-circle {
position: fixed;
display: block;
z-index: 10000;
width: 125px;
height: 125px;
top: 50%;
margin-top: -62.5px;
left: -63.5px;
background-image: url(http://css-fox.com/other/favorite-fox-badge/images/css-fox-favorite-fox-left-circle-badge.png);
background-size: cover;
-webkit-transition: -webkit-transform 0.4s ease-out;
-moz-transition: -moz-transform 0.4s ease-out;
transition: transform 0.4s ease-out;
}
a#css-fox-favorite-fox-badge-left-circle:hover {
-webkit-transform: rotateZ(180deg);
-moz-transform: rotateZ(180deg);
transform: rotateZ(180deg);
}
@media only screen and (max-width: 600px),
only screen and (max-device-width: 600px) {
#css-fox-favorite-fox-badge-left-circle {
width: 62.5px;
height: 62.5px;
left: -32px;
}
}

</style>

<a href="http://css-fox.com/Your_FOX_Name" id="css-fox-favorite-fox-badge-left-circle" target="_blank"></a>

<!--CSS-Fox Favorite Fox Badge-->

<style type="text/css">

#css-fox-favorite-fox-badge-left-square {
position: fixed;
display: block;
z-index: 10000;
width: 125px;
height: 125px;
top: 100px;
left: -63.5px;
background-image: url(http://css-fox.com/other/favorite-fox-badge/images/css-fox-favorite-fox-left-square-badge.png);
background-size: cover;
-webkit-transition: -webkit-transform 0.4s ease-out;
-moz-transition: -moz-transform 0.4s ease-out;
transition: transform 0.4s ease-out;
}
a#css-fox-favorite-fox-badge-left-square:hover {
-webkit-transform: rotateZ(180deg);
-moz-transform: rotateZ(180deg);
transform: rotateZ(180deg);
}

@media only screen and (max-width: 600px),
only screen and (max-device-width: 600px) {
#css-fox-favorite-fox-badge-left-square {
width: 62.5px;
height: 62.5px;
left: -32px;
}
}

</style>

<a href="http://css-fox.com/Your_FOX_Name" id="css-fox-favorite-fox-badge-left-square" target="_blank"></a>

<!--CSS-Fox Favorite Fox Badge-->

<style type="text/css">

#css-fox-favorite-fox-badge-right-circle {
position: fixed;
display: block;
z-index: 10000;
width: 125px;
height: 125px;
top: 100px;
right: -62.5px;
background-image: url(http://css-fox.com/other/favorite-fox-badge/images/css-fox-favorite-fox-right-circle-badge.png);
background-size: cover;
-webkit-transition: -webkit-transform 0.4s ease-out;
-moz-transition: -moz-transform 0.4s ease-out;
transition: transform 0.4s ease-out;
}
a#css-fox-favorite-fox-badge-right-circle:hover {
-webkit-transform: rotateZ(180deg);
-moz-transform: rotateZ(180deg);
transform: rotateZ(180deg);
}

@media only screen and (max-width: 600px),
only screen and (max-device-width: 600px) {
#css-fox-favorite-fox-badge-right-circle {
width: 62.5px;
height: 62.5px;
right: -31px;
}
}

</style>

<a href="http://css-fox.com/Your_FOX_Name" id="css-fox-favorite-fox-badge-right-circle" target="_blank"></a>

<!--CSS-Fox Favorite Fox Badge-->

<style type="text/css">

#css-fox-favorite-fox-badge-right-square {
position: fixed;
display: block;
z-index: 10000;
width: 125px;
height: 125px;
top: 50%;
margin-top: -62.5px;
right: -62.5px;
background-image: url(http://css-fox.com/other/favorite-fox-badge/images/css-fox-favorite-fox-right-square-badge.png);
background-size: cover;
-webkit-transition: -webkit-transform 0.4s ease-out;
-moz-transition: -moz-transform 0.4s ease-out;
transition: transform 0.4s ease-out;
}
a#css-fox-favorite-fox-badge-right-square:hover {
-webkit-transform: rotateZ(180deg);
-moz-transform: rotateZ(180deg);
transform: rotateZ(180deg);
}

@media only screen and (max-width: 600px),
only screen and (max-device-width: 600px) {
#css-fox-favorite-fox-badge-right-square {
width: 62.5px;
height: 62.5px;
right: -31px;
}
}

</style>

<a href="http://css-fox.com/Your_FOX_Name" id="css-fox-favorite-fox-badge-right-square" target="_blank"></a>