.button{
  --couBtn: var(--color2);
  --coul2Btn: #FFF;
  text-align: center;
  padding-top: 3px;
}
.button .buttonP{display: inline-block;text-decoration: none;z-index: 1;cursor: pointer; outline: none;position: relative;
  padding: 0.5em 1.2em; background:var(--couBtn); color: var(--coul2Btn);
  border: 1px solid var(--couBtn);
}
.button .buttonP::after,.button .buttonP::before,.button  .buttonP a::after{content: " ";display: block;position: absolute; top: 0;left: 0; width: 100%;height: 100%; }
.button .buttonP::after{transition: all 0.3s; background: var(--coul2Btn); z-index: -1; height: 0;}
.button .buttonP::before{ background: transparent ;z-index: -2;}
.button .buttonP a::after{cursor: pointer}
.button .buttonP a{color: inherit; text-decoration: none;}
.button .buttonP:hover{border: 1px solid transparent ; }
.button .buttonP:hover::after{height: 100%;}


.button.shapeChange[data-shape="1"] .buttonP,
.button.shapeChange[data-shape="3"] .buttonP{background:var(--coul2Btn); color: var(--couBtn); border: 1px solid var(--couBtn)}
.button.shapeChange[data-shape="1"] .buttonP::after,
.button.shapeChange[data-shape="3"] .buttonP::after{background: var(--couBtn)}


.button .buttonP:hover,
.button.shapeChange[data-shape="1"] .buttonP:hover,
.button.shapeChange[data-shape="3"] .buttonP:hover{color: var(--coul2Btn)}


.button.shapeChange[data-shape="2"] .buttonP, .button.shapeChange[data-shape="3"] .buttonP{border-radius: 2em; overflow: hidden;}

.editableZone .button .centrage::after{content: "\f061"}
.editableZone .button .alignementBtn{position: absolute; bottom: 0;left: 50%; transform: translateX(-50%);display: none;}
.editableZone .button.hover .alignementBtn{display: block;}
.editableZone .button .alignementBtn i{margin: 0 10px; cursor: pointer; color: #931D86;text-shadow: 1px 1px #FFF, -1px -1px #FFF, -1px 1px #FFF, 1px -1px #FFF;}