HTML
<head>
<button class="meuPlayer">Clique aqui</button>
</head>
<body>
<div class="playPause">
<button class="Play">Play</button>
<button class="Pause">Pause</button>
</div>
</body>
CSS .meuPlayer{ background-color: #fff; border-radius: 5px; color: #000;
/* Adicione mais estilos conforme necessário */ } .playPause{ background: linear-gradient (to bottom, #eeeeee 0%,#cccccc 100%); box-shadow: 6px 8px 0 6px #666, 10px 10px 10px #000; border-radius: 30px; display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); padding: 10px; margin-top: 2%; } .playPause button{ background-color: var(--branca); border-radius: 30px; box-shadow: 3px 3px 0 var(--cinza); color: var(--vermelha); cursor: pointer; height: 120px; font-size: 2rem; font-weight: bold; line-height: 120px; text-align: center; width: 185px; } .playPause button.ativa, .playPause button:active{ background-color: var(--vermelha); border: 4px solid var(--vermelha); box-shadow: 3px 3px 0 var(--vermelha-escura) inset; color: var(--branca); outline: none; } .playPause button.focus, .playPause button:focus{ outline: none; box-shadow: 1px 1px 10px var(--luz); } .playPause button.active:focus, .playPause button:active:focus{ box-shadow: 3px 3px 0 var(--vermelha-escura) inset, 1px 1px 10px var(--luz); }
