96 lines
3.9 KiB
CSS
96 lines
3.9 KiB
CSS
|
.a-btn{
|
||
|
|
width:100px;
|
||
|
|
height:100px;
|
||
|
|
-webkit-border-radius:50%;
|
||
|
|
-moz-border-radius:50%;
|
||
|
|
border-radius:50%;
|
||
|
|
display:block;
|
||
|
|
margin-top:30px;
|
||
|
|
left:50%;
|
||
|
|
margin-left: -50px;
|
||
|
|
background:#f0ad4e;
|
||
|
|
position:relative;
|
||
|
|
-webkit-box-shadow:0px 0px 5px 0px rgba(246, 212, 163, 0.5) inset, 0px -1px 5px 4px rgba(170, 77, 27, 0.2) inset, 0px 0px 0px 7px #fff, 0px 0px 1px 8px rgba(188, 188, 188, 0.4), 0px 0px 0px 9px #fff;
|
||
|
|
-moz-box-shadow:0px 0px 5px 0px rgba(246, 212, 163, 0.5) inset, 0px -1px 5px 4px rgba(170, 77, 27, 0.2) inset, 0px 0px 0px 7px #fff, 0px 0px 1px 8px rgba(188, 188, 188, 0.4), 0px 0px 0px 9px #fff;
|
||
|
|
box-shadow:0px 0px 5px 0px rgba(246, 212, 163, 0.5) inset, 0px -1px 5px 4px rgba(170, 77, 27, 0.2) inset, 0px 0px 0px 7px #fff, 0px 0px 1px 8px rgba(188, 188, 188, 0.4), 0px 0px 0px 9px #fff;
|
||
|
|
-webkit-transition:all 0.3s linear;
|
||
|
|
-moz-transition:all 0.3s linear;
|
||
|
|
-o-transition:all 0.3s linear;
|
||
|
|
transition:all 0.3s linear;
|
||
|
|
}
|
||
|
|
.a-btn span{
|
||
|
|
display:table-cell;
|
||
|
|
width:100px;
|
||
|
|
height:100px;
|
||
|
|
padding:20px;
|
||
|
|
text-align:center;
|
||
|
|
vertical-align:middle;
|
||
|
|
font-size:26px;
|
||
|
|
color:#fff;
|
||
|
|
text-shadow:0px 1px 1px #A03F16;
|
||
|
|
font-family:"Arvo", "Myriad Pro", "Trebuchet MS", sans-serif;
|
||
|
|
-webkit-transition:all 0.3s linear;
|
||
|
|
-moz-transition:all 0.3s linear;
|
||
|
|
-o-transition:all 0.3s linear;
|
||
|
|
transition:all 0.3s linear;
|
||
|
|
}
|
||
|
|
.a-btn span:nth-child(1),
|
||
|
|
.a-btn span:nth-child(3){
|
||
|
|
position:absolute;
|
||
|
|
top:0px;
|
||
|
|
left:0px;
|
||
|
|
font-size:40px;
|
||
|
|
line-height:36px;
|
||
|
|
opacity:0;
|
||
|
|
}
|
||
|
|
.a-btn span:nth-child(1){
|
||
|
|
background:transparent url(/static/img/star.png) no-repeat center center;
|
||
|
|
opacity:0.2;
|
||
|
|
}
|
||
|
|
.a-btn:hover{
|
||
|
|
text-decoration: none;
|
||
|
|
background:rgba(170, 77, 27, 0.6);
|
||
|
|
-webkit-box-shadow:0px 0px 5px 0px rgba(246, 212, 163, 0.5) inset, 0px -1px 5px 4px rgba(170, 77, 27, 0.2) inset, 0px 0px 0px 7px #fff, 1px 4px 5px 8px rgba(188, 188, 188, 0.6), 0px 0px 0px 9px #fff;
|
||
|
|
-moz-box-shadow:0px 0px 5px 0px rgba(246, 212, 163, 0.5) inset, 0px -1px 5px 4px rgba(170, 77, 27, 0.2) inset, 0px 0px 0px 7px #fff, 1px 4px 5px 8px rgba(188, 188, 188, 0.6), 0px 0px 0px 9px #fff;
|
||
|
|
box-shadow:0px 0px 5px 0px rgba(246, 212, 163, 0.5) inset, 0px -1px 5px 4px rgba(170, 77, 27, 0.2) inset, 0px 0px 0px 7px #fff, 1px 4px 5px 8px rgba(188, 188, 188, 0.6), 0px 0px 0px 9px #fff;
|
||
|
|
}
|
||
|
|
.a-btn:hover span:nth-child(3){
|
||
|
|
margin-top: 10px;
|
||
|
|
opacity:1;
|
||
|
|
}
|
||
|
|
.a-btn:hover span:nth-child(2){
|
||
|
|
opacity: 0;
|
||
|
|
-webkit-transform: scale(0);
|
||
|
|
-moz-transform: scale(0);
|
||
|
|
transform: scale(0);
|
||
|
|
}
|
||
|
|
.a-btn:hover span:nth-child(1){
|
||
|
|
-webkit-animation:rotate 1s linear;
|
||
|
|
-moz-animation:rotate 1s linear;
|
||
|
|
animation:rotate 1s linear;
|
||
|
|
}
|
||
|
|
.a-btn:active{
|
||
|
|
-webkit-box-shadow:0px 0px 5px 0px rgba(246, 212, 163, 0.5) inset, 0px -1px 5px 4px rgba(170, 77, 27, 0.2) inset, 0px 0px 0px 7px #fff, 0px -1px 0px 8px rgba(188, 188, 188, 0.3), 0px 0px 0px 10px #fff;
|
||
|
|
-moz-box-shadow:0px 0px 5px 0px rgba(246, 212, 163, 0.5) inset, 0px -1px 5px 4px rgba(170, 77, 27, 0.2) inset, 0px 0px 0px 7px #fff, 0px -1px 0px 8px rgba(188, 188, 188, 0.3), 0px 0px 0px 10px #fff;
|
||
|
|
box-shadow:0px 0px 5px 0px rgba(246, 212, 163, 0.5) inset, 0px -1px 5px 4px rgba(170, 77, 27, 0.2) inset, 0px 0px 0px 7px #fff, 0px -1px 0px 8px rgba(188, 188, 188, 0.3), 0px 0px 0px 10px #fff;
|
||
|
|
}
|
||
|
|
.a-btn:active span:nth-child(2){
|
||
|
|
color:rgba(170, 77, 27, 0.8);
|
||
|
|
text-shadow:0px 1px 1px rgba(255, 255, 255, 0.6);
|
||
|
|
}
|
||
|
|
@keyframes rotate{
|
||
|
|
0% { transform: scale(1) rotate(0);}
|
||
|
|
50% { transform: scale(0.5) rotate(180deg);}
|
||
|
|
100% { transform: scale(1) rotate(360deg);}
|
||
|
|
}
|
||
|
|
@-webkit-keyframes rotate{
|
||
|
|
0% { -webkit-transform: scale(1) rotate(0);}
|
||
|
|
50% { -webkit-transform: scale(0.5) rotate(180deg);}
|
||
|
|
100% { -webkit-transform: scale(1) rotate(360deg);}
|
||
|
|
}
|
||
|
|
@-moz-keyframes rotate{
|
||
|
|
0% { -moz-transform: scale(1) rotate(0);}
|
||
|
|
50% { -moz-transform: scale(0.5) rotate(180deg);}
|
||
|
|
100% { -moz-transform: scale(1) rotate(360deg);}
|
||
|
|
}
|