<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="js/jquery.js"></script>
</head>
<script>
$(document).ready(function(){
var j = 0;
$('a.loveBtn').click(function(e) {
if(j==0){
$('a.loveBtn').addClass('loved');
j = 1;
}
else{
$('a.loveBtn').removeClass('loved');
j=0;
}
});
});
</script>
<style>
.topic{ width:280px; height:250px; float: left; position:relative; border:1px solid #008ca7;}
.loveBtn {background-color: #331e0f; border: 2px solid #fff;box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.5);color: #fff;font-family: proximaNovaSemiBold,helvetica;
font-size: 15px;font-weight: 300;height: 30px;line-height: 30px;margin: -15px 0 0 12px;opacity: 1;position: absolute; right: 30px;text-align: center;top: 50%;
transition: all 0.3s ease-in 0s; -moz-transition: all 0.3s ease-in 0s;-ms-transition: all 0.3s ease-in 0s;-o-transition: all 0.3s ease-in 0s;-webkit-transition: all 0.3s ease-in 0s; width: 30px;}
.loveBtn .loveBtn-line-1 {box-shadow: 1px 0 2px 0 rgba(0, 0, 0, 0.3);width: 12px;z-index: 5;}
.loveBtn .loveBtn-line {background: #fff;border-radius: 1px;height: 3px;left: 50%;margin-left: -6px;margin-top: -1px;position: absolute;top: 50%;transition: all 0.3s ease-in 0s; -moz-transition: all 0.3s ease-in 0s;-ms-transition: all 0.3s ease-in 0s;-o-transition: all 0.3s ease-in 0s;-webkit-transition: all 0.3s ease-in 0s;}
.loveBtn .loveBtn-line-2 {box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.5);transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg);-webkit-transform: rotate(90deg); width: 12px;}
.loveBtn .loveBtn-line {background: #fff;border-radius: 1px;height: 3px;left: 50%;margin-left: -6px;margin-top: -1px;position: absolute;top: 50%;transition: all 0.3s ease-in 0s;}
.loveBtn:hover {border-color: #008ca7;box-shadow: none;color: #008ca7;background:#008ca7;}
.loveBtn.loved {background-color: #008ca7;border: 2px solid #008ca7;box-shadow: none;color: #fff;}
.loveBtn.loved .loveBtn-line-1 {margin-left: -5px;transform: rotate(125deg); -moz-transform: rotate(125deg);-ms-transform: rotate(125deg);-o-transform: rotate(125deg);-webkit-transform: rotate(125deg); width: 15px;}
.loveBtn.loved .loveBtn-line {background: #fff;box-shadow: none;}
.loveBtn.loved .loveBtn-line-2 {margin-left: -8px;margin-top: 2px;transform: rotate(40deg); -moz-transform: rotate(40deg);-ms-transform: rotate(40deg);-o-transform: rotate(40deg);-webkit-transform: rotate(40deg); width: 9px;}
.loveBtn.loved .loveBtn-line {background: #fff;box-shadow: none;}
</style>
<body>
<div class="topic">
<a href="javascript:;" class="loveBtn"><span class="loveBtn-line loveBtn-line-1"></span><span class="loveBtn-line loveBtn-line-2"></span></a>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="js/jquery.js"></script>
</head>
<script>
$(document).ready(function(){
var j = 0;
$('a.loveBtn').click(function(e) {
if(j==0){
$('a.loveBtn').addClass('loved');
j = 1;
}
else{
$('a.loveBtn').removeClass('loved');
j=0;
}
});
});
</script>
<style>
.topic{ width:280px; height:250px; float: left; position:relative; border:1px solid #008ca7;}
.loveBtn {background-color: #331e0f; border: 2px solid #fff;box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.5);color: #fff;font-family: proximaNovaSemiBold,helvetica;
font-size: 15px;font-weight: 300;height: 30px;line-height: 30px;margin: -15px 0 0 12px;opacity: 1;position: absolute; right: 30px;text-align: center;top: 50%;
transition: all 0.3s ease-in 0s; -moz-transition: all 0.3s ease-in 0s;-ms-transition: all 0.3s ease-in 0s;-o-transition: all 0.3s ease-in 0s;-webkit-transition: all 0.3s ease-in 0s; width: 30px;}
.loveBtn .loveBtn-line-1 {box-shadow: 1px 0 2px 0 rgba(0, 0, 0, 0.3);width: 12px;z-index: 5;}
.loveBtn .loveBtn-line {background: #fff;border-radius: 1px;height: 3px;left: 50%;margin-left: -6px;margin-top: -1px;position: absolute;top: 50%;transition: all 0.3s ease-in 0s; -moz-transition: all 0.3s ease-in 0s;-ms-transition: all 0.3s ease-in 0s;-o-transition: all 0.3s ease-in 0s;-webkit-transition: all 0.3s ease-in 0s;}
.loveBtn .loveBtn-line-2 {box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.5);transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg);-webkit-transform: rotate(90deg); width: 12px;}
.loveBtn .loveBtn-line {background: #fff;border-radius: 1px;height: 3px;left: 50%;margin-left: -6px;margin-top: -1px;position: absolute;top: 50%;transition: all 0.3s ease-in 0s;}
.loveBtn:hover {border-color: #008ca7;box-shadow: none;color: #008ca7;background:#008ca7;}
.loveBtn.loved {background-color: #008ca7;border: 2px solid #008ca7;box-shadow: none;color: #fff;}
.loveBtn.loved .loveBtn-line-1 {margin-left: -5px;transform: rotate(125deg); -moz-transform: rotate(125deg);-ms-transform: rotate(125deg);-o-transform: rotate(125deg);-webkit-transform: rotate(125deg); width: 15px;}
.loveBtn.loved .loveBtn-line {background: #fff;box-shadow: none;}
.loveBtn.loved .loveBtn-line-2 {margin-left: -8px;margin-top: 2px;transform: rotate(40deg); -moz-transform: rotate(40deg);-ms-transform: rotate(40deg);-o-transform: rotate(40deg);-webkit-transform: rotate(40deg); width: 9px;}
.loveBtn.loved .loveBtn-line {background: #fff;box-shadow: none;}
</style>
<body>
<div class="topic">
<a href="javascript:;" class="loveBtn"><span class="loveBtn-line loveBtn-line-1"></span><span class="loveBtn-line loveBtn-line-2"></span></a>
</div>
</body>
</html>
Hello,
No comments:
Post a Comment