Buttons - Packit UI

Botões padrão

<button class="btn xsm">Botão extra pequeno</button> 
<button class="btn sm">Botão pequeno</button> 
<button class="btn">Tamanho padrão</button> 
<button class="btn md">Botão médio</button>  
<button class="btn lg">Botão grande</button>  
<button class="btn xlg">Botão extra grande</button>

<button class="btn center">Botão alinhado ao centro</button>

<button class="btn right">Botão alinhado a direita</button>

Todos os botões suportam as classes adicionais de tamanhos e alinhamentos

xsm, sm, md, lg, xlg – center, right

Botões de alerta

Botões de sucesso ou informação

Botões de aviso

Botões de erro, cancelar, deletar ou perigo

<button class="btn success">Sucesso</button>
<button class="btn warning">Aviso</button>
<button class="btn error">Erro</button>

Botões de alerta outline

Botões de sucesso ou informação outline

Botões de aviso outline

Botões de erro, cancelar, deletar ou perigo outline

<button class="btn success outline">Sucesso</button>
<button class="btn warning outline">Aviso</button>
<button class="btn error outline">Erro</button>

/** requer css botoes padrao */

/** botoes de alerta */
.btn.success, .btn.warning, .btn.error,
.btn.success:hover, .btn.warning:hover, .btn.error:hover,
.btn.success:focus, .btn.warning:focus, .btn.error:focus,
.btn.success:active, .btn.warning:active, .btn.error:active {
    color: #FFFFFF;
    text-shadow: none;
    box-shadow: none;
}
.btn.success {
    background-color: #007580;
    background-image: linear-gradient(to bottom, #01EBFF, #007580, #007580, #01EBFF);
    border: 2px solid #01EBFF;
    border-image: linear-gradient(to bottom, #007580, #01EBFF, #01EBFF, #007580);
    border-image-slice: 2;
}
.btn.success:hover, .btn.success:focus, .btn.success:active {
    background-image: linear-gradient(to left, #01EBFF, #007580, #007580, #01EBFF);
    border-image: linear-gradient(to left, #007580, #01EBFF, #01EBFF, #007580);
    border-image-slice: 2;
}

.btn.warning {
    background-color: #7E7300;
    background-image: linear-gradient(to bottom, #E4D100, #7E7300, #7E7300, #E4D100);
    border: 2px solid #C1B700;
    border-image: linear-gradient(to bottom, #7E7300, #E4D100, #E4D100, #7E7300);
    border-image-slice: 2;
}
.btn.warning:hover, .btn.warning:focus, .btn.warning:active {
    background-image: linear-gradient(to left, #E4D100, #7E7300, #7E7300, #E4D100);
    border-image: linear-gradient(to left, #7E7300, #E4D100, #E4D100, #7E7300);
    border-image-slice: 2;
}

.btn.error {
    background-color: #800000;
    background-image: linear-gradient(to bottom, #FF0000, #800000, #800000, #FF0000);
    border: 2px solid #DE0C02;
    border-image: linear-gradient(to bottom, #800000, #FF0000, #FF0000, #800000);
    border-image-slice: 2;
}
.btn.error:hover, .btn.error:focus, .btn.error:active {
    background-image: linear-gradient(to left, #FF0000, #800000, #800000, #FF0000);
    border-image: linear-gradient(to left, #800000, #FF0000, #FF0000, #800000);
    border-image-slice: 2;
}

/** alert outline */
.btn.outline {
    background-color: transparent;
    background-image: none;
}
.btn.outline.success, .btn.outline.warning, .btn.outline.error {
    border-width: 2px;
    transition: .5s;
}
.btn.outline.success {
    color: #01EBFF;
}
.btn.outline.warning {
    color: #E4D100;
}
.btn.outline.error {
    background: radial-gradient(ellipse at top, #FF0000, transparent),
        radial-gradient(ellipse at bottom, #800000, #C40000, transparent);
    color: transparent;
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparente;
    background-clip: text;
}
.btn.outline.success:hover, .btn.outline.warning:hover, .btn.outline.error:hover,
.btn.outline.success:focus, .btn.outline.warning:focus, .btn.outline.error:focus,
.btn.outline.success:active, .btn.outline.warning:active, .btn.outline.error:active {
    color: #FFFFFF;
    transition: .35s;
}

Botões com animação:

Botão para chamar a atenção com realce de cores

<button class="btn enhance md">FALE CONOSCO</button>
<button class="btn enhance lg">FALE CONOSCO</button>
<button class="btn enhance xlg">FALE CONOSCO</button>

/** requer css botoes padrao */

.btn.enhance {
    --btnEnhance__color: #EFF1F3;
    --btnEnhance__background_1: #B6AE1F;
    --btnEnhance__background_2: #8F3B3F;
    --btnEnhance__background_3: #374457;

    color: var(--btnEnhance__color);
    border: 1px solid transparent;
    background-color: transparent;
    box-shadow: none;
    text-shadow: none;
    animation: enhance 1.6s ease infinite;
}
.btn.enhance:hover {
    animation: enhance .4s ease infinite;
}
@keyframes enhance {
    10% { background-color: var(--btnEnhance__background_1); }
    55% { background-color: var(--btnEnhance__background_2); }
    100% { background-color: var(--btnEnhance__background_3); }
}

Botão para chamar a atenção com borda em flash

<button class="btn flash sm">BORDER FLASH</button>
<button class="btn flash">BORDER FLASH</button>
<button class="btn flash md">BORDER FLASH</button>

Bordas duplas

<button class="btn flash dual xsm">BORDER FLASH DUPLO</button>
<button class="btn flash dual">BORDER FLASH DUPLO</button>
<button class="btn flash dual xlg">BORDER FLASH DUPLO</button>

/** requer css botoes padrao */

.btn.flash {
    --btnFlash__color: #EFF1F3;
    --btnFlash__background: rgba(182, 174, 31, 0.80);
    --btnFlash__border: 1px solid rgba(182, 174, 31, 0.80);

    position: relative;
    color: var(--btnFlash__color);
    background-color: var(--btnFlash__background);
    border: var(--btnFlash__border);
    box-shadow: none;
    text-shadow: none;
}
.btn.flash::before, .btn.flash.dual::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: ' ';
    border-radius: 2px;
    border: var(--btnFlash__border);
}
.btn.flash::before {
    animation: firstborder 1.1s infinite;
}
.btn.flash.dual::after {
    animation: secondborder 1.1s infinite;
}
@keyframes firstborder {
    100% {
        inset: -12px;
        opacity: 0;
    }
}
@keyframes secondborder {
    100% {
        inset: -22px;
        opacity: 0;
    }
}

Botão progresso

<button class="btn progress">Click em mim</button>

.btn.progress {
    --btnProgress__color: #EFF1F3;
    --btnProgress__background: #008080;
    --btnProgress__border: none;
    --btnProgress__background_1: #008080;
    --btnProgress__background_2: #009999;

    color: var(--btnProgress__color);
    border: var(--btnProgress__border);
    background-color: var(--btnProgress__background);
    box-shadow: var(--btnProgress__box-shadow);
    text-shadow: var(--btnProgress__text-shadow);
}
.btn.progress:focus, .btn.progress:active, .btn.progress.focus {
    box-shadow: none;
    background: repeating-linear-gradient(
        45deg,
        var(--btnProgress__background_1) 0,
        var(--btnProgress__background_1) 10px,
        var(--btnProgress__background_2) 10px,
        var(--btnProgress__background_2) 20px
    );
    background-size: 400% 400%;
    animation: progress 7s linear infinite;
}
@keyframes progress {
    0% { background-position: 100% }
    100% { background-position: 0 }
}

A partir deste ponto, as regras CSS tornam-se independentes; classes de tamanhos e alinhamentos não afetam mais seu estilo.

Botões com estilização de texto comum

<button class="input_false">Eu sou um botão com aparencia de texto</button><br>
<input class="input_false" type="button" name="delete" value="Eu sou um input do tipo button com aparencia de texto" />
<input class="input_false" type="submit" name="submit" value="Eu sou um input do tipo submit com aparencia de texto" />
<input class="input_false" type="reset" name="reset" value="Eu sou um input do tipo reset com aparencia de texto" />

Botões com aparencia de link

<button type="submit" class="input_false link">Botão com aparencia de link comum</button>
<input type="submit" class="input_false link" value="Input com aparencia de link comum" />
<button type="submit" class="input_false link delete">Botão com aparencia de link delete</button>
<input type="submit" class="input_false link delete" value="Input com aparencia de link delete" />

.input_false {
    --inputFalse_color: inherit; /* Text */
    --inputFalseLinkDefault__color: #007580;
    --inputFalseLinkDefaultHover__color: #0099A6;
    --inputFalseLinkDelete__color: #AD0707;
    --inputFalseLinkDeleteHover__color: #C40000;
    --inputFalseLink__text-decoration: underline; /* :hover */

    display: inline-block !important;
    color: var(--inputFalse_color);
    font-size: 1.04rem;
    margin: 2px 0 !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 0 !important;
    background-color: transparent !important;
}
.input_false.link {
    color: var(--inputFalseLinkDefault__color);
}
.input_false.link:hover, .input_false.link:focus, .input_false.link:active {
    color: var(--inputFalseLinkDefaultHover__color);
    text-decoration: var(--inputFalseLink__text-decoration);
}
.input_false.link.delete {
    color: var(--inputFalseLinkDelete__color);
}
.input_false.link.delete:hover, .input_false.link.delete:focus, .input_false.link.delete:active {
    color: var(--inputFalseLinkDeleteHover__color);
    text-decoration: var(--inputFalseLink__text-decoration);
}

Botão para deletar, cancelar ou perigo

Cancelar

<button onclick="history.back(1)" class="btn_cancel">Cancelar</button>
<button class="btn_cancel">
    <a href="javascript:history.back()">Cancelar</a>
</button>
<a class="btn_cancel" href="javascript:history.back()">Cancelar</a>

Cancelar

<button onclick="history.back(1)" class="btn_cancel upperstr">Cancelar</button>
<button class="btn_cancel">
    <a href="javascript:history.back()">Cancelar</a>
</button>
<a class="btn_cancel upperstr" href="javascript:history.back()">Cancelar</a>

A classe upperstr deixa o texto maiúsculo e negrito

Usando a font Baloo2

.btn_cancel, .btn_delete, .btn_danger {
    display: inline-block;
    padding: 20px 12px;
    color: #D1BFE0;
    background-color: #632929;
    border: none;
    border-radius: 2px;
    font-size: 1.11rem;
    font-family: var(--fontPrime);
    letter-spacing: 0.45px;
    line-height: 0.1;
    text-shadow: none;
    box-shadow: none;
}
.btn_cancel.upperstr, .btn_delete.upperstr, .btn_danger.upperstr {
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-weight: bold;
}
.btn_cancel:hover, .btn_delete:hover, .btn_danger:hover, 
.btn_cancel:focus, .btn_delete:focus, .btn_danger:focus,
.btn_cancel:active, .btn_delete:active, .btn_danger:active {
    color: #D1BFE0;
    background-color: #7A1E1E;
}
.btn_cancel a, .btn_delete a, .btn_danger a,
.btn_cancel a:hover, .btn_delete a:hover, .btn_danger a:hover,
.btn_cancel a:focus, .btn_delete a:focus, .btn_danger a:focus,
.btn_cancel a:active, .btn_delete a:active, .btn_danger a:active,
a.btn_cancel , a.btn_delete, a.btn_danger,
a.btn_cancel:hover, a.btn_delete:hover, a.btn_danger:hover,
a.btn_cancel:focus, a.btn_delete:focus, a.btn_danger:focus,
a.btn_cancel:active, a.btn_delete:active, a.btn_danger:active {
    color: #D1BFE0;
    text-decoration: none;
}

Lua: Para botões e outros elementos com estilo lunar

.moon foi projetado para os elementos parent: button e label, child: span e a, mais você pode tentar outros elementos.

Estilo básico

Preencher formulário

<label class="moon"><span>Preencher formulário</span></label>
<button class="moon"><span>Enviar formulário</span></button>

Efeito hover:

Desaparece

Endereço de e-mail:

Aparece

Endereço de e-mail:

<label class="moon wane"><span>Endereço de e-mail:</span></label>
<button class="moon wane"><a href="botoes/#moon">Conheça nossos planos</a></button>

<label class="moon crescent"><span>Endereço de e-mail:</span></label>
<button class="moon crescent"><a href="botoes/#moon">Conheça nossos planos</a></button>

Para os estilos básico é necessário adicionar a mesma cor de fundo do elemento parent de moon ao elementos internos "span e a"