Boutons d'angle arrondi CSS

Dans cet article, nous examinerons les propriétés de style CSS pour arrondir le bord d'un rayon. La propriété Border-Radius est notre objectif principal dans cet article. La valeur de la propriété Border-Radius donne à la frontière rectangulaire une transformation pour être un peu ronde en fonction de la valeur. Cette propriété de style de CSS peut également être subdivisée en quatre parties qui s'appliqueront à tous les coins de la frontière et peuvent être utilisées pour leur définir différentes valeurs.

Exemple 01: Utilisation de la balise de style CSS dans un fichier HTML pour créer un bouton d'angle arrondi

Dans cet exemple, nous utiliserons l'approche de la balise de style CSS pour créer un bouton d'angle arrondi dans un fichier HTML. L'élément de bouton par défaut du langage de balisage hypertexte sera rénové dans un bouton avec couleur et bordures rondes dans cet exemple. Jetons un coup d'œil au script que nous allons créer pour terminer cette tâche:

Dans le script donné, nous ouvrons notre en-tête de fichier. Dans l'en-tête de fichier, nous définissons le style de l'élément bouton. Pour cela, nous ouvrons une balise de style et appelons la classe de bouton où nous définissons les plusieurs propriétés de style. La première propriété serait le rayon de bordure du bouton qui crée une bordure pour le bouton avec des coins ronds. Ensuite, nous ajoutons la couleur à l'arrière-plan du bouton en utilisant la propriété de couleur arrière. Après cela, nous définissons la largeur et la hauteur du bouton en pixels, puis fermons les étiquettes de style et de tête. Maintenant, nous ouvrons la balise corporelle et donnons une tête vers la page à l'aide de la balise H1. Ensuite, nous ouvrons la balise du bouton et appelons la classe de bouton à l'intérieur de la balise. Cela héritera de toutes les propriétés de style qui sont définies dans la balise de style. Après cela, nous fermons toutes les balises et enregistrons le fichier pour l'ouvrir sur notre navigateur.

Dans la sortie précédente, nous pouvons voir que le bouton a des coins arrondis en raison du style CSS que nous avons spécifié dans la classe de bouton. Maintenant, nous modifions la propriété Border-Radius et observons le changement de la frontière du bouton.

Maintenant, nous augmentons la longueur des pixels du rayon de la frontière dans le script précédent et ne faisons plus de modifications autrement que cela. Après avoir enregistré et ouvert ce fichier, nous obtiendrons la sortie suivante:

Nous pouvons voir que le bouton de la sortie donnée a des extrémités complètement rondes et est différente de la version précédente lorsque le rayon de la bordure a augmenté dans le script.

Exemple 02: Utilisation de CSS en ligne pour faire un bouton avec des coins arrondis

Dans cet exemple, l'approche CSS en ligne sera adoptée pour transformer le bouton par défaut en le donnant avec des bordures rondes et en ajoutant une couleur à l'arrière-plan. Nous ajouterons le style à l'intérieur de la balise du bouton dans cet exemple, comme indiqué dans l'extrait suivant:

Dans le script donné, nous commençons notre code à partir de la balise corporelle car il n'y a pas d'utilisation de l'en-tête de fichier dans ce scénario. Dans la balise corporelle, nous ajoutons d'abord un titre à la page en ouvrant la balise H1, puis passant à la balise bouton. Dans cette balise, nous écrivons les propriétés de style en utilisant le mot-clé CSS «style». Entre les virgules inversées, les propriétés sont attribuées, séparées par des demi-colons. La première propriété est la frontière et sa valeur est «10px». Ensuite, nous attribuons la couleur de l'arrière-plan et attribuons la hauteur et la largeur du bouton. Après cela, nous fermons le bouton et les balises corporelles pour mettre fin au fichier. Et puis enregistrez-le dans le «.Format de fichier html ”afin que nous puissions l'ouvrir sur notre navigateur.

La sortie montre que nous avons transformé le bouton par défaut en lui donnant une bordure ronde et un fond blanc en utilisant le CSS en ligne à l'intérieur de la balise du bouton.

Exemple 03: Utilisation des différentes propriétés liées au rayon de bordure dans CSS sur un bouton

Dans cet exemple, nous utiliserons les différentes propriétés liées au rayon de bordure que le CSS fournit concernant la perspective de positionnement. Nous discuterons de ces différentes propriétés et les implémenterons dans le script suivant pour un fichier HTML:

Dans le script précédent, nous ajoutons quatre propriétés différentes concernant le rayon de la bordure qui sont en haut à gauche, en haut à droite, en bas à gauche et en bas à droite. Toutes ces propriétés représentent les quatre côtés de la bordure du bouton et CSS nous permet de modifier tous les côtés de la bordure, séparément. Ainsi, nous attribuons le côté gauche de la bordure du bouton avec des valeurs de rayon similaires et le côté droit de la bordure du bouton avec des valeurs de rayon similaires. Cela créera deux formes de bordure différentes des deux côtés de la bordure du bouton. Ensuite, nous ajoutons également une couleur à l'arrière-plan du bouton et attribuons une largeur et une hauteur fixe pour l'élément bouton. Après cela, nous donnons à la page une rubrique dans la balise corporelle et créons également un bouton dans la balise corporelle. La balise de bouton héritera de la classe de balise de style qui a toutes les différentes propriétés de style pour créer une forme unique pour la bordure du bouton.

Après avoir ouvert le fichier de script précédent sur notre navigateur, nous obtiendrons le résultat donné. Comme nous pouvons le voir, le bouton a deux styles différents de la bordure des deux côtés. Cela s'est produit parce que nous avons attribué les différentes valeurs du rayon de la frontière pour les deux côtés du bouton.

Exemple 04: Utilisation de CSS pour modifier les coins frontaliers d'un bouton lorsqu'il sera plané

Dans cet exemple, nous changerons la bordure du bouton lorsqu'il sera plané. L'approche CSS TAG CSS suivra pour créer un effet de survol sur le bouton. Dans cet exemple, nous créerons une classe distincte et une fonction spécifique à hériter également pour cette classe.

Dans ce script, nous créons une classe de style dans l'en-tête de fichier pour l'élément bouton. Ensuite, nous créons une nouvelle fonction immobilière pour cette classe appelée «voltigerie». Dans cette fonction, nous avons réglé le rayon de la frontière sur «10px», qui se traduit par une animation de la transition de la frontière vers une bordure ronde. Maintenant, nous fermons l'en-tête de l'étiquette après avoir terminé toutes les propriétés liées au style. Dans la balise corporelle, nous créons une rubrique en utilisant la balise H1 et ouvrez également une balise de bouton. Dans cette balise de bouton, nous utilisons la classe de bouton de l'en-tête du fichier pour hériter de toutes les propriétés de formatage. Après avoir enregistré le fichier, nous l'ouvrirons sur notre navigateur.

La sortie montre l'effet après le bouton tel qu'il a été défini dans la classe de style et sa fonction.

Conclusion

Dans cet article, nous avons discuté des plusieurs approches pour créer un bouton avec des coins arrondis en utilisant les différents styles CSS qui sont le CSS en ligne et le style CSS de style. Nous avons observé les différentes propriétés liées à ce phénomène dans cet article. Et mis en œuvre ces variations dans le Bloc-notes ++ pour saisir une meilleure compréhension de ce concept.