Déplacez le bouton CSS vers la droite

Un site Web bien conçu peut vous aider à développer un premier premier impact sur les utilisateurs ciblés. Il donne aux téléspectateurs du site Web une impression positive des consommateurs et rend plus fluide pour qu'ils parcourent et y accédez. En dehors des autres éléments importants, tout site Web a besoin de boutons pour fonctionner correctement. Les boutons permettent aux consommateurs de s'engager avec une plate-forme et d'exécuter une action en sélectionnant les options. Grâce à l'application des nombreux attributs stylistiques au bouton, les boutons CSS sont déployés pour orner les sites Web. Vous pouvez ajouter des couleurs, modifier les tailles, l'alignement d'un bouton, etc.

L'alignement fait référence au positionnement de quelque chose d'une manière particulière, qui peut être du texte ou des boutons. L'alignement du bouton fait référence à la façon dont vous souhaitez positionner vos boutons, je.e. à gauche, à droite ou au centre de la page Web.

Cet article discutera de l'utilisation de CSS pour aligner un bouton à droite. Diverses propriétés CSS sont disponibles pour le positionnement du texte ou du bouton. Nous pouvons le faire en utilisant la propriété Float, la propriété Text-Align et Justify-Content Property.

Propriété flottante pour aligner le bouton à droite

La propriété CSS Float détermine comment les données sont structurées et positionnées sur une page Web.

Nous devons d'abord créer un bouton dans le fichier html. Nous utilisons l'éditeur de texte sublime pour mettre cette illustration en pratique. Le code HTML pour créer un bouton simple est illustré dans l'image suivante:

Dans ce code, nous avons créé un bouton dans le fichier html. Nous avons utilisé la balise qui est utilisée comme conteneur pour envelopper les éléments HTML à l'intérieur. Les attributs «Div Class» sont utilisés pour styliser le fichier HTML avec CSS. Nous avons ajouté un texte affiché sur le bouton.

Vous pouvez voir le bouton que nous venons de créer et d'afficher sur le côté gauche de la page par défaut.

Maintenant, la prochaine chose que nous devons faire est de positionner ce bouton dans le coin droit de la page. Le script CSS est utilisé pour accomplir cela. Le bouton est placé à droite à l'aide de l'attribut CSS Float. Le ".Button_Btn ”fait référence à la classe div que nous avons créée dans le code HTML pour faire un bouton. Maintenant, nous pouvons accéder et appliquer la conception au bouton créé à l'intérieur de ce conteneur. Nous utilisons la propriété «flottante» dedans et définissons sa valeur à «droite». Il nous fournit certaines valeurs - aucune, à droite, à gauche, initiale et hériter. Puisque nous avons l'intention de positionner le bouton vers la droite, nous utilisons donc la «bonne» valeur pour la propriété flottante dans CSS.

Le script précédent, lorsqu'il est exécuté, donne la sortie affichée dans l'image suivante. Le bouton est placé à droite de l'écran lorsque la valeur de la propriété flottante est définie sur «droite».

Propriété texto-aligne pour aligner le bouton à droite

La propriété suivante que nous utilisons pour aligner un bouton à droite est la propriété «Text-Align» dans CSS. Nous avons créé un fichier html. À l'intérieur de la balise du HTML, nous avons créé un titre qui est montré en haut de la page Web en utilisant le

étiqueter. Ensuite, nous avons créé un bouton à l'intérieur de la classe. Définissez un texte affiché sur le bouton.

Cela nous fera présenter la page Web de sortie présentée dans l'image. Le texte que nous avons ajouté s'affiche dans le coin supérieur droit de la page tandis que c'est le bouton que nous avons créé.

Pour déplacer ce bouton que nous avons créé dans le code précédent sur le côté droit de la page, nous exerçons la propriété «Text-Align». Nous utilisons le «Text-Align» dans le script CSS. Le code CSS est donné ci-dessous:

La propriété Text-Align est utilisée pour positionner l'élément dans les différentes directions. Cette propriété nous fournit certaines valeurs pour positionner les éléments, notamment la gauche, la droite, le centre, l'initial, l'héritage et la justification. Puisque nous voulons que le bouton soit positionné dans le coin droit de la page Web, nous utilisons la «bonne» valeur de la propriété «Text-Align» dans CSS.

Maintenant, nous travaillons avec le script CSS pour styliser le bouton que nous avons créé dans le fichier HTML. Le ".»Fait référence à la classe Div que nous avons créée dans HTML, suivie du nom de classe. Ceci est notre exemple de «bouton». Cela nous permet de styliser l'élément à l'intérieur de la classe mentionnée. La propriété «Text-Align» est définie sur la valeur «droite» pour que le bouton s'aligne dans le coin droit de la page Web.

Vous pouvez voir comment l'application simple de la propriété «Text-Align» vous aide dans l'alignement du bouton à votre position souhaitée. Pour nos besoins, nous l'avons ajusté à droite et l'image de sortie montre un bouton avec le texte «Appuyez sur le curseur» aligné sur le côté droit.

Justifier la propriété-contenu pour aligner le bouton à droite

La dernière propriété que nous allons exécuter pour aligner le bouton dans le coin droit est la propriété «Justify-Content». Dans les cas précédents, la première chose que nous avons faite a été de créer un fichier HTML. Vous pouvez le faire dans n'importe quel éditeur de texte ou Visual Studio; Nous l'implémentons sur l'éditeur de texte sublime.

Dans le fichier html, à l'intérieur de la balise, nous avons d'abord créé une rubrique avec le

étiqueter. Ensuite, nous avons créé des données factices en utilisant le

étiqueter. Le

La balise est utilisée lorsque nous écrivons les paragraphes en HTML. Nous avons alors commencé le . Dans un document HTML, la balise Div désigne une partition ou un segment. Les éléments HTML sont placés à l'intérieur de la balise «div», puis le style CSS est appliqué. Nous avons spécifié le nom de la classe div «Dummy_BTN». Nous stylisons le bouton dans CSS en utilisant ce nom de classe. Ensuite, à l'intérieur de la balise de bouton, nous avons défini le «type de bouton» et la «classe de bouton», en plus. Nous avons ajouté le texte qui apparaît sur le bouton.

Cette image présente une rubrique et un paragraphe. Au bas de ce contenu, un bouton que nous avons créé dans HTML s'affiche.

Maintenant, nous stylisons ce bouton avec le script CSS en utilisant la propriété «Justify-Contin». Dans le script CSS, nous avons commencé la balise «style». À l'intérieur de la balise de style, nous avons le «.dummy-btn ”pour coiffer le bouton que nous avons créé dans la classe div avec ce nom. À l'intérieur des accolades, nous avons utilisé le «Affichage: Flex». Pour utiliser un Flexbox, un conteneur Flex doit avoir l'attribut Flex d'affichage. La longueur réglable pour les éléments réglables est spécifiée via la propriété Flex. Nous définissons ensuite la propriété Justify-Content.

La sortie de l'extrait de code généré précédemment est affichée dans l'image suivante:

Conclusion

Dans cet article, nous avons discuté des trois propriétés CSS pour aligner le bouton sur la position souhaitée. Nous avons utilisé la propriété flottante, la propriété Text-Align et la propriété Justify-Content. Chacune des propriétés mentionnées est expliquée en détail avec les codes HTML et CSS. Nous avons implémenté l'exemple de code à l'aide de l'éditeur de texte sublime. En utilisant les différentes propriétés, ce tutoriel rend simple à l'alignement des boutons dans CSS.