Înlătură notificare
Bun venit pe all4games.ro, Vizitator.
Distribuie şi tu această comunitate pentru a devenii mai cunoscută. Dacă ai tutoriale şi/sau resurse, nu ezita să le postezi şi aici. Mulţumim!
Înregistrare sau logare.

HTML Buton în mai multe culori.

Discuție în 'Html' creată de Gigiz, 25 Mai 2017.

  1. Gigiz

    Gigiz
    Administrator
    Membru personal

    Înscris:
    15 Mar 2016
    Mesaje:
    304
    Aprecieri primite:
    84
    Aprecieri oferite:
    4
    • Adaugă în fişierul tău .css :
      COD:
      Select All
      div {
        
      margin-bottom20px;
      }
      .
      btn {
        
      displayinline-block;
        
      bordernone;
        
      border-radius.3em;
        
      box-shadowinset 0 0 0 1px rgba(0000.1), inset 0 -0.25em 0 rgba(0000.25), 0 0.25em 0.25em rgba(0000.05);
        
      color#fff;
        
      cursorpointer;
        
      font-family'Raleway'sans-serif;
        
      font-weight300;
        
      line-height1.5;
        
      letter-spacing1px;
        
      padding.5em 1.5em .75em;
        
      positionrelative;
        
      text-decorationnone;
        
      text-shadow0 1px 1px rgba(2552552550.25);
        
      vertical-alignmiddle;
        -
      webkit-user-selectnone;
        -
      moz-user-selectnone;
        -
      ms-user-selectnone;
        
      user-selectnone; }
        .
      btn:active {
        
      box-shadowinset 0 0 0 1px rgba(0000.2), inset 0 2px 0 rgba(2552552550.1), inset 0 0.25em 0.5em rgba(0000.05);
        
      margin-top.25em;
        
      padding-bottom.5em; }
        .
      btn:active, .btn:focus {
        
      outlinenone; }

      .
      btn--blue {
        
      background-color#3498db; }

      .btn--green {
        
      background-color#1abc9c; }

      .btn--red {
        
      background-color#e65d4f; }

      .btn--lg {
        
      font-size1.5em; }

      .
      btn--df {
        
      font-size1.25em; }

      .
      btn--md {
        
      font-size1em; }

      .
      btn--sm {
        
      font-size0.75em; }
    • Adaugă unde vrei să apară butonul următorul cod:
      COD:
      Select All
      <button class="btn btn--sm btn--blue" href="#">Button</button>
    • Modifică btn--blue cu btn--green dacă vrei să fie verde sau cu btn--red dacă vrei să fie roşu.
    • Modifică btn btn--sm cu btn btn--lg dacă vrei să fie buton mare cu btn btn--df dacă vrei să fie buton normal, cu btn btn--md dacă vrei să fie buton mediu.
    Demo: Trebuie să te loghezi pentru a vedea link-ul
     

Distribuie pagina asta