--- url: 'https://dxpr.com/it/hc/documentazione/impara-dxpr-builder/design/stili-pulsante' title: 'Scegli stili di pulsante che guidano i visitatori | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T03:01:11+00:00' updated: '2026-10-24T19:36:26+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- Decidi tu quanto è forte ogni pulsante. Un pulsante pieno indica l’azione che vuoi di più, e un pulsante con solo contorno accanto offre l’alternativa senza competere. Questa pagina mostra come dare stile a una coppia del genere e quale impostazione cambia cosa. Per aggiungere un pulsante e impostarne il link, vedi Aggiungere un Button. Il video segue i passaggi sotto: rende Apply now il pulsante principale e aggiunge un secondo pulsante con solo contorno. tags: - 'Design guides' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T19:36:26+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Scegli stili di pulsante che guidano i visitatori' description: |- Decidi tu quanto è forte ogni pulsante. Un pulsante pieno indica l’azione che vuoi di più, e un pulsante con solo contorno accanto offre l’alternativa senza competere. Questa pagina mostra come dare stile a una coppia del genere e quale impostazione cambia cosa. Per aggiungere un pulsante e impostarne il link, vedi Aggiungere un Button. Il video segue i passaggi sotto: rende Apply now il pulsante principale e aggiunge un secondo pulsante con solo contorno. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T03:01:11+0000' dateModified: '2026-10-24T19:36:26+0000' author: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' mainEntityOfPage: 'https://dxpr.com/it/hc/documentazione/impara-dxpr-builder/design/stili-pulsante' articleSection: 'Guide di design' - '@type': WebPage '@id': 'https://dxpr.com/it/hc/documentazione/impara-dxpr-builder/design/stili-pulsante' description: |- Decidi tu quanto è forte ogni pulsante. Un pulsante pieno indica l’azione che vuoi di più, e un pulsante con solo contorno accanto offre l’alternativa senza competere. Questa pagina mostra come dare stile a una coppia del genere e quale impostazione cambia cosa. Per aggiungere un pulsante e impostarne il link, vedi Aggiungere un Button. Il video segue i passaggi sotto: rende Apply now il pulsante principale e aggiunge un secondo pulsante con solo contorno. breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Home item: 'https://dxpr.com/it' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: it --- [Centro assistenza](/it/hc)/[Documentazione](/it/hc/documentazione) /[Impara DXPR Builder](/it/hc/documentation/learn-dxpr-builder) /[Crea le pagine](/it/hc/documentation/learn-dxpr-builder/build) /[Dai stile agli elementi](/it/hc/documentation/learn-dxpr-builder/element-settings) /[Guide di design](/it/hc/documentation/learn-dxpr-builder/design/overview) # Scegli stili di pulsante che guidano i visitatori. Impara DXPR BuilderCrea le pagineDai stile agli elementiGuide di design ## In questa guida Guide correlate - [Aggiungere un pulsante](/it/hc/documentazione/impara-dxpr-builder/elementi/pulsante) - [Fai reagire gli elementi al passaggio del mouse](/it/hc/documentazione/impara-dxpr-builder/design/effetti-hover) - [Usa i colori del tuo brand](/it/hc/documentazione/impara-dxpr-builder/design/colori-e-brand) Decidi tu quanto è forte ogni pulsante. Un pulsante pieno indica l’azione che vuoi di più, e un pulsante con solo contorno accanto offre l’alternativa senza competere. Questa pagina mostra come dare stile a una coppia del genere e quale impostazione cambia cosa. Per aggiungere un pulsante e impostarne il link, vedi [Aggiungere un Button](/it/hc/documentazione/impara-dxpr-builder/elementi/pulsante). Il video segue i passaggi sotto: rende Apply now il pulsante principale e aggiunge un secondo pulsante con solo contorno. ## Dai stile a un pulsante principale e a un secondo pulsante Parti da un pulsante nella pagina, come **Apply now**. 1. Passa sopra il pulsante con il mouse e apri **More > Settings**. 2. Imposta **Type** a **Primary**. 3. Imposta **Size** a **Large** e fai clic su **Save**. 4. Passa di nuovo sopra il pulsante e apri **More > Clone**. La copia compare subito sotto l’originale. 5. Apri **More > Settings** sulla copia. Cambia il suo **Title**, ad esempio in `Download brochure`, e il suo **Link**. 6. Attiva **Outline style** e fai clic su **Save**. 7. Fai clic su **Save** sulla barra. ## Scegli uno stile per ogni azione | Azione | Stile | Esempio | |---|---|---| | L’azione che vuoi di più | Pieno **Primary** | Apply now | | Un’alternativa | **Outline style** nello stesso **Type** | Download brochure | | Un’azione minore | **Link**, che sembra un link di testo | Read the terms | | Un avviso o un passaggio finale | **Danger** o **Warning** | Cancel my booking | Usa un pulsante pieno per sezione, così i visitatori vedono subito dove fare clic. Scrivi etichette che dicono cosa succede: "Get started" invece di "Click here", "Send message" invece di "Submit". ## Cosa vedrai Due pulsanti grandi si impilano nella colonna: uno pieno con il colore primario del tuo tema e uno con solo contorno, bordo e testo dello stesso colore. Quello pieno attira prima l’occhio. I link non si aprono mentre modifichi. Per testarli, salva la pagina, apri il menu vista (l’icona occhio) e scegli **Preview**. ## Impostazioni | Impostazione | Cosa fa | Predefinito | |---|---|---| | **Type** | Lo stile di colore: **Primary**, **Secondary**, **Success**, **Info**, **Warning**, **Danger**, **Link**, **Light** o **Dark**. I colori vengono dal tuo tema. | **Primary** | | **Outline style** | Un bordo e un testo colorati senza riempimento | Spento | | **Size** | **Normal**, **Large** o **Small** | **Normal** | | **Block button** | Allunga il pulsante per tutta la larghezza della sua colonna | Spento | | **Link target** | **Same window** o **New window**. Compare quando **Link** ha un valore. | **Same window** | Per i themers: ogni **Type** aggiunge la classe Bootstrap `btn-`, come `btn-primary`. Con **Outline style** attivo, diventa `btn-outline-`, tranne per **Link**, che resta sempre `btn-link`. **Large** aggiunge `btn-lg`, **Small** aggiunge `btn-sm` e **Block button** aggiunge `btn-block`. ## Se non vedi lo stile - **Il pulsante con solo contorno non mostra bordi.** **Type** è **Link**, che sembra sempre un link di testo, quindi **Outline style** non ha effetto. Scegli un altro **Type** per un pulsante con solo contorno. - **Il pulsante quasi sparisce.** **Light** è vicino al bianco, quindi svanisce in una sezione bianca. Scegli un **Type** più scuro, oppure dai alla sezione un colore di sfondo. - **Il link si apre nella stessa scheda.** **Link target** è **Same window**, e compare solo quando **Link** ha un valore. Compila prima **Link**, poi scegli **New window**. ## Prossimi passi - [Aggiungere un Button](/it/hc/documentazione/impara-dxpr-builder/elementi/pulsante): ogni impostazione dei pulsanti, con video. - [Effetti hover](/it/hc/documentazione/impara-dxpr-builder/design/effetti-hover): scurisci un pulsante o aggiungi un’ombra quando il puntatore lo raggiunge. - [Colore e branding](/it/hc/documentazione/impara-dxpr-builder/design/colori-e-brand): mantieni i colori dei pulsanti in linea con il tuo brand.