web design solution bucuresti, creare site web de prezentare, optimizare seo romania, preturi promovare site, firma website.

Naked Buttons – tendinta ultimilor 5 ani in web design

Naked Buttons – tendinta ultimilor 5 ani in web design

Tags :

Category : Blog

In ultimul timp vedem din ce mai multe site-uri web care prezinta un element comun si anume butoanele “naked”. Aceasta este una dintre cele mai noi tendinte in ultimi 5 ani in design web.

Ce este un Naked Button?

Este un buton web simplificat la maxim, fara o culoare de fundal, fara umbre, etc. Acesta prezinta doar o forma fina de contur care in general este drepunghiulara si un text. Mai este cunoscut si cu numele de “ghost”, “hollow”, “phantom” sau “empty” button.

Pentru ca un astfel de buton sa functioneze bine in cadrul unei teme web avem nevoie de imagini mari de fundal sau de fundaluri colorate. Intr-o astfel de tema butonul naked se adapteaza perfect si ii da un plus de eleganta.

Efectul de hover, cel pe care il vedem cand trecem mouse-ul deasupra acestui buton este acela al umplerii cu aceeasi culoare a conturului. Mai jos aveti un tutorial pentru acest tip de buton:

…citeste mai multe

Stilul CSS pentru ca elementul nostru <a> să arate ca un buton naked.

.buton-naked {
display: inline-block;
width: 200px;
padding: 8px;
color: #fff;
border: 1px solid #fff;
text-align: center;
outline: none;
text-decoration: none;
}

Stilul CSS pentru efectul de hover:

.buton-naked:hover, .buton-naked:active { background-color: #fff; color: #000; }

Si elementul HTML <a> care reprezinta butonul naked:

<a class="buton-naked" href="#">Textul pt buton aici</a>

Demo: treceti mouse-ul deasupra butonului ca sa vedeti rezultatul codului de deasupra.

Textul pt buton aici


Reclama

Localizare

Reclama

loading...