Transition to expand transparent background from middle outward - html

Question

I want to make a CSS animation to open a transparent background from the center to the border (right and left) and leave the border red with text red and without any background.
Is it possible to do? I think I made a mistake with the class "bottone" but I don't know where!
The button needs to be like this, but with the colors inverted:
.bottone {
background: red;
box-sizing: border-box;
appearance: none;
color: #fff;
border: 2px solid red;
cursor: pointer;
display: inline-block;
position: relative;
align-self: center;
font-size: 1rem;
font-weight: 400;
line-height: 1;
margin: 20px;
padding: 1.2em 2.8em;
text-decoration: none;
text-align: center;
text-transform: uppercase;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
position: relative;
overflow: hidden;
z-index: 1;
transition: color 150ms ease-in-out;
}
.bottone:after {
content: '';
position: absolute;
display: block;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 0%;
height: 100%;
background: red;
z-index: -1;
transition: width 150ms ease-in-out;
}
.bottone:hover {
color: red;
}
.bottone:hover:after {
width: 110%;
}
<a class="bottone">example</a>
Here's another attempt:
.bottone {
background: transparent;
box-sizing: border-box;
appearance: none;
color: red;
border: 2px solid red;
cursor: pointer;
display: inline-block;
position: relative;
align-self: center;
font-size: 1rem;
font-weight: 400;
line-height: 1;
margin: 20px;
padding: 1.2em 2.8em;
text-decoration: none;
text-align: center;
text-transform: uppercase;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
position: relative;
overflow: hidden;
z-index: 1;
transition: color 150ms ease-in-out;
}
.bottone:after {
content: '';
position: absolute;
display: block;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 0%;
height: 100%;
background: red;
z-index: -1;
transition: width 150ms ease-in-out;
}
.bottone:hover {
color: #fff;
}
.bottone:hover:after {
width: 110%;
}
<a class="bottone">example</a>

Answer 1

Instead of "opening a transparent background", consider "moving two elements to reveal a transparent background". One idea is to use two pseudo-elements, :before and :after, that recede to opposite sides of the box.
In my example, one is left:0 and the other is right:0.
Their widths both transition from 50% to 0.
body {
background-color: lightgreen;
}
.bottone {
background: transparent;
box-sizing: border-box;
appearance: none;
color: white;
border: 2px solid red;
cursor: pointer;
display: inline-block;
position: relative;
align-self: center;
font-size: 1rem;
font-weight: 400;
line-height: 1;
margin: 20px;
padding: 1.2em 2.8em;
text-decoration: none;
text-align: center;
text-transform: uppercase;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
position: relative;
overflow: hidden;
z-index: 1;
transition: color 150ms ease-in-out;
}
.bottone:hover {
color: red;
}
.bottone:before,
.bottone:after {
content: '';
position: absolute;
display: block;
top: 0;
width: 50%;
height: 100%;
background: red;
z-index: -1;
transition: width 150ms ease-in-out;
}
.bottone:before {
left: 0;
}
.bottone:after {
right: 0;
}
.bottone:hover:before,
.bottone:hover:after {
width: 0;
}
<a class="bottone">example</a>

Answer 2

Color need to be swapped.
pseudo size needs also to be set and reset on hover.
CSS commented
.bottone {
background: transparent;
box-sizing: border-box;
appearance: none;
color: white;/* inverted*/
border: 2px solid red;
cursor: pointer;
display: inline-block;
position: relative;
align-self: center;
font-size: 1rem;
font-weight: 400;
line-height: 1;
margin: 20px;
padding: 1.2em 2.8em;
text-decoration: none;
text-align: center;
text-transform: uppercase;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
position: relative;
overflow: hidden;
z-index: 1;
transition: color 150ms ease-in-out;
}
.bottone:after {
content: '';
position: absolute;
display: block;
top: 0;
left: 50%;
width: 0%;
height: 100%;
width: 110%;/* moved here */
background: red;
transform: translateX(-50%);
z-index: -1;
transition: width 150ms ease-in-out;
}
.bottone:hover {
color: red;/* inverted */
}
.bottone:hover:after {
width: 0;/* reset here */
}
<a class="bottone">example</a>