Modificare i pulsanti

In questo video imparerai come aggiungere i pulsanti in Webround e come gestire il loro stile statico ed animato.

Trascrizione

Per aggiungere pulsanti in Webround seguiamo la solita procedura. Trasciniamo e rilasciamo i pulsanti dalla icona più a sinistra nella parte superiore di un canvas. I nostri pulsanti nel template sono animati e hanno uno stile particolare. Dobbiamo cambiare il testo per primo, poi lo stile base e infine lo stile dell'animazione del passaggio del mouse.

Stiamo iniziando dal contenuto del testo e, come di consueto, dobbiamo fare clic destro sul componente per accedere al menu contestuale. I tipi di carattere precedentemente definiti possono essere riutilizzati per i pulsanti, quindi la famiglia di font e il colore del testo sono applicati automaticamente, ma possiamo anche impostare uno stile di testo unico per il nostro pulsante. Utilizzando lo stile di paragrafo, applicheremo il font Geist.

Il primo pulsante che stiamo modificando dovrebbe avere un background scuro e uno stile animato che cambia il colore al passaggio del mouse. Per farlo, facciamo clic destro sul pulsante e clicchiamo sull'icona pennello, che apre il menu dello stile del contenitore. Qui possiamo facilmente sostituire il colore di sfondo con uno scuro.

Con l'ultima modifica, il nostro testo è diventato illeggibile perché dovrebbe essere bianco. Apriamo il menu del testo per raggiungere le ultime opzioni, dove troveremo il colore del testo e lo impostiamo su bianco. Per completare lo stile, dobbiamo aggiornare la proprietà del raggio dei bordi con il menu dello stile del contenitore. Qui troveremo l'opzione del raggio di curvatura, lo imposteremo a 8.

Il pulsante è ancora privo dell'effetto di animazione, che deve cambiare il colore di sfondo. Gli effetti di passaggio sono disponibili nel menu delle animazioni, accessibile tramite l'icona dello Stickman in corsa. Apriamo il menu e troveremo una serie di proprietà che possono essere cambiate quando si passa il mouse sul pulsante. Scegliamo la proprietà del colore e scegliamo il pulsante blu che abbiamo precedentemente salvato. Ora, il pulsante cambia colore al passaggio del mouse.

Se vogliamo replicare questo stile su tutto il sito, possiamo salvare lo stile del pulsante. Utilizziamo la seconda posizione. Per sovrascrivere lo stile del pulsante con quello che abbiamo appena salvato, possiamo fare clic destro su un pulsante e utilizzare il menu per sovrascrivere lo stile. Questo pulsante ha uno stile diverso.

Per resettare l'animazione, possiamo disabilitare tutte le animazioni dal menu e poi applicare un background trasparente al pulsante. Dopo aver cambiato il colore del testo su nero, possiamo impostare lo stile di bordo. Per cambiare il colore del bordo, facciamo clic sull'icona del selettore di colore e impostiamo un colore più chiaro riducendo il valore dell'alfa per aumentare la trasparenza.

L'ultima cosa da fare è applicare l'animazione del bordo quando si passa il mouse sul pulsante. Per farlo, accediamo alle animazioni e impostiamo la spessore e il colore del bordo.