Boutons

CSS3
.realisationbouton2 {
 
  color:white;
 
  border-style: solid;
  border-width: 2px;
  border-color:white!;
  

 

  text-align: center;
 
  
  transition: all 0.5s;
  
  margin: 5px;
  opacity: 1!important;
}

 

.realisationbouton2 span:after {
  content: ‘\00bb‘;
  position: absolute;

 

  top: 0;
  
  transition: 0.5s;
  opacity: 1!important;

 

}

 

.realisationbouton2:hover span {
  padding-right: 25px;
  
  opacity: 1;
}

 

.realisationbouton2:hover span:after {
  opacity: 0;
  right: 0;
 
}

 

.realisationbouton2 {
  opacity: 1!important;
  position: relative;
  display: -webkit-inline-box;
  
  overflow: hidden;
  z-index: 1;
  -webkit-box-align: center;
          
          align-items: center;
          padding-left: 10px;
          
}
.realisationbouton2::before {
  opacity: 1!important;
  content:  »;
  position: absolute;
  left: 0;
  top: 0;
  -webkit-transform: scaleX(0);
          transform: scaleX(0);
  -webkit-transform-origin: 0 50%;
          transform-origin: 0 50%;
  width: 100%;
  height: 100%;
  background-color: #600000;
  z-index: -1;
  -webkit-transition: -webkit-transform 750ms;
  
  
}
.realisationbouton2 span {
  opacity: 1!important;
  display: flex;
  
          justify-content: center;
  margin-left: 3rem;
  padding: 1rem;
  
  
  background-color: #600000;
}
.realisationbouton2 svg {
  opacity: 1!important;
  
  max-width: 20px;
  width: 100%;
  height: auto;
  max-height: 18px;

 

}
.realisationbouton2:hover::before {
  opacity: 1!important;
  -webkit-transform: scaleX(1);
          transform: scaleX(1);
       
}
HTML

<svg xmlns= »http://www.w3.org/2000/svg » style= »display: none; »>
<defs>
<symbol id= »arrow » viewBox= »0 0 100 100″>
<path d= »M12.5 45.83h64.58v8.33H12.5z »/>
<path d= »M59.17 77.92l-5.84-5.84L75.43 50l-22.1-22.08 5.84-5.84L87.07 50z »/>
</symbol>
</defs>
</svg>

<div class= »content »>

<p class= »realisationbouton2″ id= »realisationbouton2″>
Mes réalisations
<span>
<svg>
<use xlink:href= »#arrow » href= »#arrow »></use>
</svg>
</span>
</p>

</div>

</div>

 

rendu:

Mes réalisations