Tutorial - 2 Modelos de Botões

Hello, hello friends! Hoje eu vou ensinar 2 modelos de botões, eu achei o resultado fofo, não dá para utilizar em muita coisa, mas serve para qualquer outra!

Vá em Modelo > Editar HTML, aperte CRTL + F e digite:

]]></b:skin>

Acima de ]]></b:skin> coloque os seguintes códigos:

Modelo 1

.buttonpress {
  padding: 15px 25px;
  font-size: 24px;
  text-align: center;
  cursor: pointer;
  outline: none;
  color: #fff;
  background-color: #99ccff;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #80bfff;
}
.buttonpress:hover {
text-decoration: none;
background-color: #cc99ff;
box-shadow: 0 9px #bf80ff;
}
.buttonpress:active {
  background-color: #ffccff;
  box-shadow: 0 5px #ffb3ff;
  transform: translateY(4px);
  text-decoration: none;
}

Abra um gadget HTML/JavaScript e cole o seguinte código:

<button class='buttonpress'><a href='/'>Clique em Mim!</a></button>

Modelo 2

.buttonripple {
    position: relative;
    background-color: #4CAF50;
    border: none;
    font-size: 28px;
    color: #FFFFFF;
    padding: 20px;
    width: 200px;
    text-align: center;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    text-decoration: none;
    overflow: hidden;
    cursor: pointer;
}
.buttonripple:after {
    content: "";
    background: #90EE90;
    display: block;
    position: absolute;
    padding-top: 300%;
    padding-left: 350%;
    margin-left: -20px!important;
    margin-top: -120%;
    opacity: 0;
    transition: all 0.8s
}
.buttonripple:active:after {
    padding: 0;
    margin: 0;
    opacity: 1;
    transition: 0s
}

Abra um gadget HTML/JavaScript e cole o seguinte código:

<button class='buttonripple'><a href='/'>Clique em Mim!</a></button>

Vermelho - Texto

Verde - Link

Bye bye!