Botones Opciones

by DanielSTh

HTML

<script src='https://c1e9f673777453e74b043477f86c6ed1434fe89e.googledrive.com/host/0B3B7spTqq92_M3kzUmlnWHZfQTQ' type='text/javascript'></script>
<div class="opciaones">
<div class="repro-music">
    <a href="http://www.jotformz.com/uploads/DanielSTh/50895727582671/303662427281214484/02%20MUEVETE%20SE%C3%91OR.mp3">MUEVETE SEÑOR</a>
</div>
<div class="descargar-music">
    
    <a href="http://www.jotformz.com/uploads/DanielSTh/50895727582671/303662427281214484/02%20MUEVETE%20SE%C3%91OR.mp3">MUEVETE SEÑOR</a>
</div>
 <button class="ver-video">Ver video</button>
<div id="cont-ver-video" style="display:none;">
   <iframe src="http://www.youtube.com/embed/PrOrG7a2ohQ?rel=0&amp;controls=1&amp;showinfo=0" frameborder="0"></iframe>  
    <a  class="ver-mas-video" href="https://www.youtube.com/embed/PrOrG7a2ohQ?rel=0&amp;controls=1&amp;showinfo=0;autoplay=1&amp;" target="_blank">Ver en Grande</a>
    <a class="descargar-video" href="https://ssyoutube.com/watch?v=zwbMqZDA6KA" target="_blank"><i class="fa fa-cloud-download"></i> Descargar Video</a>
    
</div>
    
    
</div>

CSS

.ywp-container .ywp-player{background: rgb(96, 137, 15)}
.ywp-container .ywp-hdr .ywp-hdr-logo{display: none!important}
.ywp-container .ywp-btn-collapse-player .ywp-btn-expand-collapse-link,.ywp-container .ywp-btn-expand-player .ywp-btn-expand-collapse-link{background: rgb(79, 110, 17)!important;}
.ywp-container .ywp-btn-collapse-player .ywp-btn-expand-collapse-link:hover,.ywp-container .ywp-btn-expand-player .ywp-btn-expand-collapse-link:hover{background:rgb(63, 86, 19)!important;}

.opciones{width:350px;  width: 350px; background: rgb(97, 17, 110);border: 5px solid;
}
.repro-music a{
  float: left;
  background-image: -webkit-linear-gradient(top, #EEFBFF, #B8E0FF);
  background-image: linear-gradient(#EEFBFF, #B8E0FF);
  border: 1px solid #1487C0;
  border-bottom-color: #0A85C2;
  color: #D5EEFF!important;
  display: inline-block;
  cursor: pointer;
  font: bold 11px/normal verdana, arial, sans-serif;
  margin: 0;
  overflow: hidden;
  position: relative;
  padding: 8px;
  text-align: center;
  text-decoration: none;
  transition: all .1s ease;
  vertical-align: middle;
  white-space: nowrap;
  filter: progid:DXImageTransform.Microsoft.Shadow(color=#CCCCCC,direction=180,strength=1);
  -webkit-box-shadow: 0 1px 0 rgba(0,0,0,.1), inset 1px 1px 0 #EFFDFF;
  box-shadow: 0 1px 0 rgba(0,0,0,.1), inset 1px 1px 0 #EFFDFF;
    }

.repro-music a:before{content: "\f025 Escuchar "; color: #369; text-shadow: 1px 1px rgba(255,255,255,.7); position: relative; left: 19px;}

.descargar-music a:before{content: "\f019 Descargar "; color: #FFF;
  text-shadow: 1px 1px rgba(0,0,0,.3);; position: relative; left: 19px;}
.ver-video:before{content: "\f008";position:realtive;}

.descargar-music a{  border-bottom-color: #0A85C2;
  float: left;
  color: #8EC54D!important;
  display: inline-block;
  cursor: pointer;
  font: bold 11px/normal verdana, arial, sans-serif;
  margin: 0;
  overflow: hidden;
  position: relative;
  padding: 8px;
  text-align: center;
  text-decoration: none;
 ...

JavaScript

//<![CDATA[
$('.ver-video').toggle(function() {
    $(this).text('Ocultar Video');
    $('#cont-ver-video').slideDown(800);
}, function() {
    $(this).text('Mostrar Video');
    $('#cont-ver-video').slideUp(100);
});
//]]>