Créer un bouton avec un angle coupé
Grâce au CSS, nous pouvons styliser nos liens afin qu’ils ressemblent à des boutons. Et les possibilités de design sont encore plus infinies lorsqu’on pousse un peu l’utilisation du CSS !
Avec quelques lignes de CSS, nous allons pouvoir sortir des sentiers battus en toute simplicité et personnaliser de façon originale notre bouton ! Ici, pour changer l’apparence de notre angle de façon angulaire (et non pas arrondie, sinon un border-radius aurait suffit ?), nous allons venir supperposer un triangle au niveau de l’angle bas droit de notre bouton.
Créer un triangle en CSS
Il est possible de créer un triangle avec le CSS en se servant d’un bloc ayant une largeur et une hauteur à 0 et en jouant sur la taille de sa bordure. Ici, le triangle sera non pas une div mais tout simplement le pseudo-élément ::before du lien.
.btn {
color:white;
background:#FEDA23;
padding: 15px 30px 15px 60px;
position: relative;
}
.btn::before {
content:'';
border-bottom:23px solid white; /*couleur du fond derrière le bouton*/
border-right: 20px solid transparent;
position: absolute;
left:0;
bottom: 0
}Si vous avez des difficultés dans la création de votre triangle, n’hésitez pas à utiliser un générateur.
En découvrir davantage sur le CSS ?
Vous souhaitez pousser votre niveau de compétences en intégration web et faire certifier vos connaissances ? Nous proposons des formations pour devenir développeur web fullstack ou UI-UX Designer en 3 mois.
