3/2/2018 - 10:52 PM


Proprietati esentiale care se aplica unui buton:

- display: inline-block, 
- se specifica width, daca e nevoie-de ex cand sunt doua butoane ce trebuie sa fie simetrice ca latime
- Pentru centrarea pe verticala a textului unui buton CU UN SINGUR RAND DE TEXT, se aplica height si line-height aceeasi valoare in px.
- Daca textul din buton e variabil, OCUPA MAI MULTE RANDURI, nu se da height in general (insa se poate da height si overflow:hidden elementului).
- Pentru a centra butonul pe pagina, se aplica .align-left/center/right parintelui butonului.  
- Se poate da padding lateral butonului

Utilizare taguri pentru butoane in Html:

1. De navigare catre alta pagina, se realizeaza cu: <a>link</a>

    Ex de <a> tags:
    - A search button (normally triggers a type-ahead ajax-search thingy - but the href could just point to a /search/ page.)
    - A publish button (triggers the next stage of publishing something a user built - but the href could just point to a /publish/ page.)
    - A thumbnail button (opens a lightbox with a larger version - but the href could just point to the URL of that larger version.)
    Ex: <a href="#meaningful" class="button" role="button">
          I'm good

2. De manipulare alte elemente din pagina, cu ajutorul Javascript, de exemplu sa deschida/ inchida popup sau meniu; se foloseste tag <button>.
    - Buttons are used to create features that rely on Javascript. 
    - Behaviours such as revealing a menu or showing a date picker.

3. De trimitere a unui formular catre server.
  Ex: <input type="submit" value="Trimite"/>
   - Buttons within a <form> have functionality without JavaScript, but that is the only place. 
    Meaning, a <button> is entirely useless in HTML unless JavaScript is successfully downloaded and executed.
    Taken to an extreme logical conclusion, you should never use a <button> (or type="button") in HTML outside of a form. Since JavaScript is required for the button to do anything, you should inject the button into place with JavaScript once its functionality is already ready to go.
    - Submit buttons shouldn’t have a hand cursor
.button {
  display: inline-block;
  width: 300px;
  height: 30px;
  line-height: 30px;