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

<style type="text/css">

#css-fox-favorite-fox-dark-badge {
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-v2/images/css-fox-favorite-fox-dark-badge.svg);
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-dark-badge:hover {
-webkit-transform: rotateZ(180deg);
-moz-transform: rotateZ(180deg);
transform: rotateZ(180deg);
}

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

</style>

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

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

<style type="text/css">

#css-fox-favorite-fox-light-badge {
position: fixed;
display: block;
z-index: 10000;
width: 125px;
height: 125px;
top: 50%;
margin-top: -62.5px;
right: -63.5px;
background-image: url(http://css-fox.com/other/favorite-fox-badge-v2/images/css-fox-favorite-fox-light-badge.svg);
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-light-badge:hover {
-webkit-transform: rotateZ(180deg);
-moz-transform: rotateZ(180deg);
transform: rotateZ(180deg);
}

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

</style>

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