Pulsanti angolari arrotondati CSS

In questo post, esamineremo le proprietà in stile CSS per arrotondare il bordo di un raggio. La proprietà del raggio di frontiera è il nostro obiettivo principale in questo articolo. Il valore della proprietà del raggio di frontiera dà al bordo rettangolare una trasformazione un po 'rotonda a seconda del valore. Questa proprietà di stile di CSS può anche essere suddivisa in quattro porzioni che si applicheranno a tutti gli angoli del bordo e può essere utilizzato per impostare valori diversi su di essi.

Esempio 01: Utilizzo del tag in stile CSS in un file HTML per creare un pulsante ad angolo arrotondato

In questo esempio, useremo l'approccio del tag in stile CSS per creare un pulsante ad angolo arrotondato in un file HTML. L'elemento pulsante predefinito del linguaggio di markup ipertestuale verrà rimodellato in un pulsante con bordi di colore e rotondi in questo esempio. Diamo un'occhiata allo script che creeremo per completare questa attività:

Nello script indicato, apriamo la nostra intestazione del file. Nell'intestazione del file, definiamo lo stile dell'elemento pulsante. Per questo, apriamo un tag di stile e chiamiamo la classe dei pulsanti in cui definiamo le diverse proprietà di styling. La prima proprietà sarebbe il raggio del bordo del pulsante che crea un bordo per il pulsante con angoli rotondi. Quindi, aggiungiamo il colore allo sfondo del pulsante utilizzando la proprietà di sfondo. Dopo questo, definiamo la larghezza e l'altezza del pulsante in pixel e quindi chiudiamo lo stile e le etichette della testa. Ora apriamo il tag del corpo e diamo una testa alla pagina con l'aiuto del tag H1. Quindi, apriamo il tag pulsante e chiamiamo la classe del pulsante all'interno del tag. Questo erediterà tutte le proprietà di stile definite nel tag di stile. Dopo questo, chiudiamo tutti i tag e salviamo il file per aprirlo sul nostro browser.

Nell'output precedente, possiamo vedere che il pulsante ha angoli arrotondati a causa dello stile CSS che abbiamo specificato nella classe del pulsante. Ora, modifichiamo la proprietà del raggio di confine e osserviamo il cambiamento nel bordo del pulsante.

Ora, aumentiamo la lunghezza dei pixel del raggio del bordo nella sceneggiatura precedente e non apportiamo ulteriori cambiamenti oltre a questo. Dopo aver salvato e aperto questo file, otterremo il seguente output:

Possiamo vedere che il pulsante nell'uscita data ha estremità completamente rotonde ed è diverso dalla versione precedente quando il raggio del bordo è stato aumentato nella sceneggiatura.

Esempio 02: Utilizzo di CSS in linea per creare un pulsante con angoli arrotondati

In questo esempio, l'approccio CSS in linea verrà adottato per trasformare il pulsante predefinito dandolo con bordi rotondi e aggiungendo un colore allo sfondo. Aggiungeremo lo styling all'interno del tag del pulsante in questo esempio, come mostrato nel seguente frammento:

Nello script indicato, iniziamo il nostro codice dal tag del corpo in quanto non vi è alcun uso dell'intestazione del file in questo scenario. Nel tag del corpo, aggiungiamo prima una rotta alla pagina aprendo il tag H1 e quindi passiamo al tag del pulsante. In questo tag, scriviamo le proprietà di stile usando la parola chiave CSS "stile". Tra le virgole invertite, le proprietà sono assegnate, separate da punti e virgola. La prima proprietà è il raggio di confine e il suo valore è "10px". Quindi, assegniamo il colore dello sfondo e assegniamo l'altezza e la larghezza del pulsante. Dopo questo, chiudiamo il pulsante e i tag del corpo per terminare il file. E poi salvalo nel ".Formato file html "in modo da poterlo aprire sul nostro browser.

L'output mostra che abbiamo trasformato il pulsante predefinito dandogli un bordo rotondo e uno sfondo bianco usando il CSS in linea all'interno del tag del pulsante.

Esempio 03: Utilizzo delle diverse proprietà relative al raggio del bordo in CSS su un pulsante

In questo esempio, useremo le diverse proprietà relative al raggio del bordo che il CSS fornisce per quanto riguarda la prospettiva di posizionamento. Discuteremo queste diverse proprietà e le implementeremo nel seguente script per un file HTML:

Nella sceneggiatura precedente, aggiungiamo quattro diverse proprietà riguardanti il ​​raggio del bordo che sono in alto a sinistra, in alto a destra, in basso a sinistra e in basso a destra. Tutte queste proprietà rappresentano i quattro lati del bordo del pulsante e CSS ci consente di modificare ogni lato del bordo, separatamente. Quindi, assegniamo il lato sinistro del bordo del pulsante con valori di raggio simili e il lato destro del bordo del pulsante con valori di raggio simili. Questo creerà due diverse forme di bordo su entrambi i lati del bordo del pulsante. Quindi, aggiungiamo anche un colore allo sfondo del pulsante e assegniamo una larghezza fissa e un'altezza per l'elemento pulsante. Dopo questo, diamo alla pagina un'intestazione nel tag del corpo e creiamo anche un pulsante nel tag del corpo. Il tag del pulsante erediterà la classe di tag di stile che ha tutte le diverse proprietà di stile per creare una forma unica per il bordo del pulsante.

Dopo aver aperto il file di script precedente sul nostro browser, otterremo il risultato dato. Come possiamo vedere, il pulsante ha due diversi stili del bordo su entrambi i lati. Ciò è accaduto perché abbiamo assegnato i diversi valori del raggio del bordo per entrambi i lati del pulsante.

Esempio 04: Utilizzo di CSS per cambiare gli angoli del bordo di un pulsante quando verrà librata

In questo esempio, cambieremo il bordo del pulsante quando verrà litigato. Seguirà l'approccio CSS tag di stile per creare un effetto hover sul pulsante. In questo esempio, creeremo una classe separata e una funzione specifica da ereditare anche per questa classe.

In questo script, creiamo una classe di styling nell'intestazione del file per l'elemento pulsante. Quindi, creiamo una nuova funzione di proprietà per questa classe chiamata "Hover". In questa funzione, impostiamo il raggio del bordo su "10px", che si traduce in un'animazione della transizione del bordo verso un bordo bordo rotondo. Ora chiudiamo l'intestazione del tag dopo aver completato tutte le proprietà relative allo stile. Nel tag del corpo, creiamo un'intestazione utilizzando il tag H1 e apriamo anche un tag pulsante. In questo tag pulsante, utilizziamo la classe dei pulsanti dall'intestazione del file per ereditare tutte le proprietà di formattazione. Dopo aver salvato il file, lo apriamo sul nostro browser.

L'output mostra l'effetto dopo il pulsante dopo che è stato definito nella classe di styling e nella sua funzione.

Conclusione

In questo articolo, abbiamo discusso dei vari approcci per creare un pulsante con angoli arrotondati usando i diversi stili CSS che sono il CSS in linea e il tag Style CSS. Abbiamo osservato le diverse proprietà relative a questo fenomeno in questo articolo. E implementato queste variazioni nel blocco note ++ per comprendere meglio questo concetto.