|
.play_border { |
|
margin:5px; |
|
border: 2px solid rgba(0,0,0,0.7); |
|
-webkit-border-radius: 100%; |
|
-moz-border-radius: 100%; |
|
border-radius: 100%; |
|
width: 20px; |
|
height: 20px; |
|
-webkit-box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.5); |
|
-moz-box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.5); |
|
box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.5); |
|
-webkit-transition: all 0.5s ease; |
|
-moz-transition: all 0.5s ease; |
|
-o-transition: all 0.5s ease; |
|
-ms-transition: all 0.5s ease; |
|
transition: all 0.5s ease; |
|
cursor: pointer; |
|
display: inline-block; |
|
/* For IE 7 */ |
|
zoom: 1; |
|
*display: inline; |
|
} |
|
.play_border:hover{ |
|
border-color: transparent; |
|
-webkit-box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.2); |
|
-moz-box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.2); |
|
box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.2); |
|
} |
|
.play_border:hover .play_button{ |
|
border-left: 10px solid rgba(0,0,0,0.5); |
|
} |
|
.play_border:active,.play_border:focus{ |
|
-webkit-box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.2); |
|
-moz-box-shadow: 0px 0px 5.play_button:hoverpx 2px rgba(0, 0, 0, 0.2); |
|
box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.2); |
|
} |
|
.play_border:hover .pause_button{ |
|
border-left: 4px solid rgba(0,0,0,0.5); |
|
box-shadow: 4px 0px 0px rgba(0,0,0,0.5); |
|
} |
|
.play_border:active,.pause_button:focus{ |
|
-webkit-box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.2); |
|
-moz-box-shadow: 0px 0px 5.pause_button:hoverpx 2px rgba(0, 0, 0, 0.2); |
|
box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.2); |
|
} |
|
.play_button { |
|
position:relative; |
|
top: 2px; |
|
left: 35%; |
|
width: 0; |
|
height: 0; |
|
border-top: 8px solid transparent; |
|
border-bottom: 8px solid transparent; |
|
border-left: 10px solid rgba(0,0,0,0.8); |
|
} |
|
.pause_button { |
|
position: relative; |
|
top: 5px; |
|
left: 26%; |
|
width: 2px; |
|
height: 10px; |
|
box-shadow: 4px 0px 0px rgba(0,0,0,0.8); |
|
border-left: 4px solid rgba(0,0,0,0.8); |
|
} |
|
|
