• Regolamento Macrocategoria DEV
    Prima di aprire un topic nella Macrocategoria DEV, è bene leggerne il suo regolamento. Sei un'azienda o un hosting/provider? Qui sono anche contenute informazioni per collaborare con Sciax2 ed ottenere l'accredito nella nostra community!

Release Pulsanti stile flat

vgg5465

Utente normale
8 Marzo 2009
99
4
19
Miglior risposta
0
#1 Autore del topic
CIao ragazzi,

vi propongo la mia versione di pulsanti flat, vengono utilizzati molto in questo periodo, seguendo la moda del web design. (come possiamo notare anche da questo sito)


HTML​

HTML:
<body>
    <div id="top">
    	<p class="btn">Bottone</p>
    </div>
</body>
CSS​

Codice:
#top{ background: #EFEFEF; width: 100%; height: 50px; padding-top: 15px; padding-left: 300px; }  

.btn {background: #0ea7e7; color: #fff; width: 50px; height: 20px; font-size: 15px; font-weight: 300; padding: 9px 20px 7px 20px; border-bottom: 3.5px solid #0c8ec5; margin: 0px 10px; border-radius: 5px; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; cursor: pointer; }
.btn:hover { color: #fff; background: #11B3F6; border-bottom: 3.5px solid #0c8ec5; }
.btn:active { color: #fff; background: #0ea7e7; border-bottom: 2.5px solid #0c8ec5; padding: 8.5px 20px 7.5px 20px; margin-top: 1px; }

È molto semplice come codice, ma ho pensato potesse essere comunque utile a qualcuno, per prendere spunto o per capire come effettivamente si può ragionare per la realizzazione.

Un saluto.
 
Ultima modifica:

#Nick

Nuovo utente
13 Giugno 2015
41
0
21
18
Veneto
Miglior risposta
0
#4
CIao ragazzi,

vi propongo la mia versione di pulsanti flat, vengono utilizzati molto in questo periodo, seguendo la moda del web design. (come possiamo notare anche da questo sito)


HTML​

HTML:
<body>
    <div id="top">
    <p class="btn">Bottone</p>
    </div>
</body>
CSS​

Codice:
#top{ background: #EFEFEF; width: 100%; height: 50px; padding-top: 15px; padding-left: 300px; }  

.btn {background: #0ea7e7; color: #fff; width: 50px; height: 20px; font-size: 15px; font-weight: 300; padding: 9px 20px 7px 20px; border-bottom: 3.5px solid #0c8ec5; margin: 0px 10px; border-radius: 5px; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; cursor: pointer; }
.btn:hover { color: #fff; background: #11B3F6; border-bottom: 3.5px solid #0c8ec5; }
.btn:active { color: #fff; background: #0ea7e7; border-bottom: 2.5px solid #0c8ec5; padding: 8.5px 20px 7.5px 20px; margin-top: 1px; }

È molto semplice come codice, ma ho pensato potesse essere comunque utile a qualcuno, per prendere spunto o per capire come effettivamente si può ragionare per la realizzazione.

Un saluto.
Carino
 
Mi Piace: 1 utente
Shoutbox
  1. S Santa Elera: Ho un problema con il mio telefonino
  2. S Santa Elera: C'è qualcuno che può aiutarmi?
  3. #KiK #KiK: CAFONE
  4. #KiK #KiK: ma come parla
  5. 404NotFound 404NotFound: figa
  6. topolino1958 topolino1958: Ragazzi dove posso postare un canale telegram per pubblicità?
  7. Cristoforo58 Cristoforo58: Sono vietati link esterni a Sciax2 in shoutbox, grazie.
  8. Mr_Joker Mr_Joker: vi ricordiamo che domani pomeriggio dalle 2-5pm "Sunake Hotel" apre le selezioni a diverse posizione staff.
  9. Forzaese23 Forzaese23: retro babbo
  10. #KiK #KiK: createlo amikoooo
  11. B bbhojjjj76: fake login habbo ne avete?
  12. N NeroWhite BO: Buonasera
  13. #Egzon14 #Egzon14: dunque possiamo definirli morti i retro
  14. #Egzon14 #Egzon14: habbo passerà ad unity
  15. #KiK #KiK: ma infatti
  16. #Egzon14 #Egzon14: ancora con sti retro habbo
  17. M mikiamo2012: Qualcuno per creare retro habbo?
  18. topolino1958 topolino1958: Ragazzi dove posso postare un canale telegram per pubblicità?
  19. #KiK #KiK: e poi ci sono io che vado a sorseggiare un po di kaffè su habbo inglese
  20. #Egzon14 #Egzon14: è proprio morto sciax2
  21. #KiK #KiK: Amiciii come statee
  22. #KiK #KiK: Cerco staff per la mia kaffetteriaaaa
  23. LogR LogR: Cerco tutto lo staff per il mio retroserver
  24. LogR LogR: https://www.sciax2.it/forum/threads/cerco-team-progetto-pronto.700516/
  25. A AnonymousOwna: Lubex Hotel è online vi aspetto
Top