[RÉGLÉ] Créer un bouton dans un article

[zebulon437]

Bonsoir à tous,
je souhaite creer un bouton dans un article pour faire un lien vers une autre page de mon site.
j'ai fait quelques recherches sur le net et je suis tombé sur ce tuto https://www.youtube.com/watch?v=6NTPqzmPYyg&t=6s qui permet d'avoir un rendu que je trouve sympa pour le bouton. J'ai récupéré le code fourni par l'auteur https://believemy.com/r/creer-un-bou...me-arc-en-ciel et je l'ai intégré à mon article pour la partie HTML

 <p style="text-align: center;"><button><a title="Contact and Reservation" href="contact-us-v2?view=form"> Contact and Reservation</a></button></p>

et à mon user.css dont copie intégrale ci dessous pour la partie css.

/*couleur bandeau*/
.container-header {
background: #e5a8f7;
}


/*taille de la police du menu*/
.navbar a,
.navbar button {
font-size: 2rem;
}



/* Change couleur des fonds*/
body {
background-color : #ecd7f2;
}

.container-component {
background-color : #ecd7f2;
}

/* change couleur fond fil d'ariane*/
.breadcrumb {
background-color: #ecd7f2;
}

/*change couleur de fond des cartes */
.card {
background-color: #ecd7f2;

}
/* agrandissement de la baniere pour occuper tout le header*/
.container-header .navbar-brand {
  padding-top: 0;
}
body.wrapper-fluid header {
  padding-left: 0;
  padding-right: 0;
}
body.wrapper-fluid header > .grid-child, body.wrapper-fluid > .grid-child {
  padding-left: 0;
  padding-right: 0;
}
.container-header .grid-child {
  padding: 0;
}

/*Css du bouton*/
button {
  padding: 20px 10px;
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
  border: 0px;
  background: transparent;
  position: relative;
  transition: all .2s;
  overflow: hidden;
  color: #fff;
  border-radius: 30px;
  box-shadow: 0px -0px 0px 0px rgba(143, 64, 248, .5), 0px 0px 0px 0px rgba(39, 200, 255, .5);
}
/*Css du carré Arc en ciel*/
button::after {
  content: '';
  width: 400px;
  height: 400px;
  position: absolute;
  top: -50px;
  left: -100px;
  background-image: linear-gradient(225deg, #27d86c 0%, #26caf8 50%, #c625d0 100%);
  z-index: -1;
  transition: all .5s;
}
/*Css des effets de survol du bouton*/
button:hover::after {
  transform: rotate(150deg);
}

button:hover {
  transform: translate(0,-6px);
  box-shadow: 10px -10px 25px 0px rgba(143, 

64, 248, .25), -10px 10px 25px 0px rgba(39, 200, 

255, .25);
}​​

Malheureusement , si je vous demande de l'aide c'est que le résultat n'est pas celui attendu. Au lieu d'avoir un bouton "au repos" il n'y a que le texte qui est affiché, par contre au passage de la souris dessus le bouton est se déplace bien vers le haut et le bouton apparait dessous. Quelqu'un aurait il une idée?
Je suis sous J5.2.2 avec le template Cassiopea. L'article dans lequel j'ai fait mon test se trouve ici : https://www.velo-club-valreas.com/Pr...nce-in-one-day
j'ai également fait un test en insérant une image en forme de bouton qui elle fonctionne sans soucis, je ne garderai bien sûr que l'une des deux solutions , mais ma préférence irait bien sur vers le bouton plutôt que vers l'image
Merci d'avance pour votre aide

[Helloo]

Bonjour,

Par exemple, à insérer dans ton user.css

button {
background-image: linear-gradient(225deg, #27d86c 0%, #26caf8 50%, #c625d0 100%);
}
​

[zebulon437]

Trop génial , ça marche impeccable maintenant. Merci beaucoup pour l'aide hyper rapide. Je passe le sujet en résolu.

[lefabdu51]

bonjour, que ce soit la balise p, la balise button ou a, aucune n as d'id ou de classe css....

[schott0200]

Pour info, depuis Joomla 5.2.2 les boutons sont faisable directement depuis TinyMCE sans codage.