Why does my CSS Transition depend on zoom and resolution? - css

Question

I've been struggling for a while with an animation that always seems to be inaccurate despite many attempts to fix it.
I would like a "minus" symbol to turn into a "plus" on the hover event. The rotation of the minus happens but the two lines (vertical and horizontal) never seem to be centered and at the end of the animation the vertical line adds some pixels seeming slightly wider than when it was horizontal. Changing resolution or zooming changes the geometry of the vertical line. The vertical line is not centered or becomes more "fat".
What I am looking for is a perfect animation that is independent of resolution and various imperfections.
On Codepen I reported the relevant code, try to play with it a little.
HTML:
<div>
<a class="n-button button-flat n-button-default-size button-default button-1 n-button-default-span n-button-default-type" target="_self" href="#" style="margin-left:124px;">
<i class="fa-minus fas button-icon-left" aria-hidden="true"></i><span class="n-button-text">Guarda cosa facciamo</span>
</a>
</div>
CSS:
* {
box-sizing: border-box;
}
body {
background-color: black;
--button-border-radius-top-left: 0px;
--button-border-radius-top-right: 0px;
--button-border-radius-bottom-right: 0px;
--button-border-radius-bottom-left: 0px;
margin: 0;
color: #747474;
min-width: 320px;
-webkit-text-size-adjust: 100%;
font: 13px/20px PTSansRegular,Arial,Helvetica,sans-serif;
}
.n-button.button-1{
border-radius:0px 0px 0px 0px;
}
.n-button{
outline: 0;
display: inline-block;
position: relative;
text-align: center;
text-decoration: none;
cursor: pointer;
box-sizing: border-box;
font-family: var(--button_typography-font-family);
font-weight: var(--button_typography-font-weight);
font-style: var(--button_typography-font-style,normal);
letter-spacing: var(--button_typography-letter-spacing);
border-width: var(--button_border_width-top,0) var(--button_border_width-right,0) var(--button_border_width-bottom,0) var(--button_border_width-left,0);
border-style: solid;
border-radius: var(--button-border-radius-top-left,0) var(--button-border-radius-top-right,0) var(--button-border-radius-bottom-right,0) var(--button-border-radius-bottom-left,0);
text-transform: var(--button_text_transform);
transition: all .2s;
}
.n-button.button-flat {
box-shadow: none!important;
}
.n-button-default-size, button.button {
padding-top: var(--button_padding-top,13px);
padding-right: var(--button_padding-right,29px);
padding-bottom: var(--button_padding-bottom,13px);
padding-left: var(--button_padding-left,29px);
line-height: var(--button_line_height, 1);
font-size: var(--button_font_size, 14px);
}
.button-default{
background: var(--button_gradient_top_color);
color: var(--button_accent_color);
border-color: var(--button_border_color);
}
a{
transition-property: color,background-color,border-color;
transition-duration: .2s;
transition-timing-function: linear;
}
div{
margin: 20px;
}
/*************/
.fa-minus:before {
top: 0;
position: absolute;
}
.fa-minus.fas.button-icon-left{
margin-right: 30px;
}
.fa-minus.fas.button-icon-left, .icon-minus.button-icon-left {
color: #f3ad00 !important;
}
a:hover .fa-minus.fas.button-icon-left:before{
content: "\f068";
top: 0;
position: absolute;
margin-right: 30px;
}
.n-button i, .n-button-text {
transition: all 1s cubic-bezier(0.66, 0.01, 0, 1.07) 0s;
}
.fa-minus.fas.button-icon-left:after {
content: "\f068";
display: block;
position: absolute;
transition : all 1s cubic-bezier(0.66, 0.01, 0, 1.07) 0s;
top: 0
}
a:hover .fa-minus.fas.button-icon-left:after {
content: "\f068";
transform: rotate(90deg);
transition: all 1s cubic-bezier(0.66, 0.01, 0, 1.07) 0s;
}
:root {
--button_padding-top: 0px;
--button_padding-bottom: 10px;
--button_padding-left: 0px;
--button_padding-right: 0px;
--button_typography-font-family: Montserrat, Arial, Helvetica, sans-serif;
--button_typography-font-weight: 400;
--button_typography-letter-spacing: 0px;
--button_font_size: 18px;
--button_line_height: 20px;
--button_text_transform: none;
--button_gradient_top_color: rgba(255,255,255,0);
--button_gradient_top_color_hover: rgba(255,255,255,0);
--button_accent_color: rgba(255,255,255,0.69);
--button_border_width-top: 0px;
--button_border_width-right: 0px;
--button_border_width-bottom: 0px;
--button_border_width-left: 0px;
--button_border_color: rgba(255,255,255,0);
--button_padding: 11px 23px;
}
Many thanks in advance