Button by TISEPSE

1.jsp {
2  /* c'est le lien  */
3    position: relative;
4    display: flex;
5    background-color: #DAC0A3;
6    padding: 15px 25px;
7    font-size: 30px;
8    text-transform: none;
9    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
10    z-index: 2;
11    letter-spacing: 3px;
12    box-shadow: 0 0.4rem #EADBC8;
13    box-shadow: 0.4rem 0.4rem 0  #EADBC8;
14    transition: 0.5s;
15}
16
17.jsp::before{
18    content: '';
19    position: absolute;
20    height: 75px;
21    width: 5px;
22    background-color: #FAF1E4; 
23    opacity: 1;
24    inset: 0px;
25    left: -5px;
26    transition: 0.3s ease-in-out; 
27}
28
29.jsp:hover{
30    transition: 0.5s;
31    transform: translatey(-15px);
32    color: #FAF1E4;
33}
34
35.jsp:hover::before{
36    transform: translateX(6.5em);
37}
38
39.bck-grnd:hover span {
40  top: -70%;
41  border-radius: 50px 50px 0px 0px;
42}
43
44.bck-grnd:hover {
45  color: #d8ba98;
46  border: 3px solid #DAC0A3;
47  box-shadow: none;
48}
49
50.jsp:active {
51  transform: scale(0.9);
52
53}
54
55
56