Button (informatica): differenze tra le versioni

Versione delle 19:08, 21 nov 2020

Versione delle 15:03, 10 feb 2021

Riga 1:

{{Nota disambigua|descrizione=informazioni sul pilota di Formula 1|titolo=Jenson Button}}

{{S|programmazione}}

L'oggetto '''button''' è un oggetto innestato nell'oggetto [[Form]], della definizione [[XML]] DOM. La sua definizione permette di creare molte interazioni con l'utente nelle [[pagina web|pagine web]].

Quando ad esempio si clicca su un [[Form|modulo]] (p.es. quello di [[Wikipedia]] per la modifica delle pagine) si interagisce con l'operazione tramite un elemento '''Button'''.

Riga 101 ⟶ 100:

*<code>onMouseUp</code>: codice da eseguire quando si rilascia l'oggetto con il mouse.

== Formattazione ==

{{Portale|informatica}}

=== Stili [[CSS]] al passaggio del mouse ===

Stati al passaggio del mouse<ref>{{Cita web|url=https://zellwk.com/blog/style-hover-focus-active-states/|titolo=Style hover, focus, and active states differently {{!}} Zell Liew|sito=zellwk.com|lingua=en|accesso=2021-02-10}}</ref>:<syntaxhighlight lang="css">

.selector {

&:hover,

&:focus,

&:active {

}

}

</syntaxhighlight>Gli stati di "hover" sono generalmente rappresentati da un cambiamento di colore:<syntaxhighlight lang="css">

button {

background-color: #00ff00;

}

button:hover {

background-color: #ff00ff;

}

button:focus {

outline: none;

box-shadow: 0 0 0 3px lightskyblue;

}

</syntaxhighlight>È possibile utilizzare una combinazione di <code>outline</code>, <code>border</code>e <code>box-shadow,</code>le proprietà per creare stili di messa a fuoco (quando per esempio il mouse clicca il bottone o quando l'utente lo ha già cliccato almeno una volta):<syntaxhighlight lang="css">

button:active {

background-color: #666;

border-color: #666;

color: #333;

}

</syntaxhighlight>

==== Tecniche ====

Esempio di un bottone creato solo in [[CSS|CSS 3]] (lo stesso risultato è ottenibile con un'immagine vettoriale o bitmap fatta in [[Inkscape]], [[Adobe Illustrator|Illustrator]], [[GIMP|Gimp]] o [[Adobe Photoshop|Photoshop]]):<syntaxhighlight lang="css">

.BUTTON_prova {

background: #3D94F6;

background-image: linear-gradient(top, #3D94F6, #C4CDDD);

color: #FFFFFF;

font-family: Brush Script MT;

font-size: 40px;

font-weight: 100;

padding: 40px;

box-shadow: 1px 1px 20px 0 #000000;

text-shadow: 1px 1px 20px #000000;

border: solid #337FED 1px;

text-decoration: none;

display: inline-block;

cursor: pointer;

text-align: center;

}

.BUTTON_prova:hover {

border: solid #337FED 1px;

background: #1E62D0;

background-image: linear-gradient(top, #1E62D0, #3D94F6);

border-radius: 20px;

text-decoration: none;

}

</syntaxhighlight>

[[File:Example-button.png|alt=Risultato|centro|miniatura|Risultato]]

=== Esempi ===

<gallery>

File:Button-css-3.png|alt=Bottoni animati con CSS3 Animations. Nel primo caso il bottone si anima ad intermittenza, nel secondo si anima al passaggio del mouse|Bottoni animati con [[CSS Animations|CSS3 Animations]]. Nel primo caso il bottone si anima ad intermittenza, nel secondo si anima al passaggio del mouse

File:Button-css-2.png|alt=Tre tecniche per ottenere lo stesso bottone "pattern": CSS3, SVG e immagine bitmap|Tre tecniche per ottenere lo stesso bottone "pattern": CSS3, SVG e immagine bitmap

File:Button-css.png|alt=Esempi di bottoni formattati con CSS o SVG o programmi di grafica|Esempi di bottoni formattati con CSS o SVG o programmi di grafica

</gallery>{{Portale|informatica}}

[[Categoria:XML DOM]]