I have the following CSS3 button animation:
HTML::
<a href="" class="btn">
<span>
Hover on Me
</span>
</a>
CSS:
/* line 1, C:/xampp/htdocs/fs/borderAnimation/scss/style.scss */
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
/* line 8, C:/xampp/htdocs/fs/borderAnimation/scss/style.scss */
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* line 82, C:/xampp/htdocs/fs/borderAnimation/scss/style.scss */
a {
text-decoration: none;
}
/* line 85, C:/xampp/htdocs/fs/borderAnimation/scss/style.scss */
a:hover,
a:active,
a:focus {
text-decoration: none;
}
/* line 93, C:/xampp/htdocs/fs/borderAnimation/scss/style.scss */
.btn {
display: inline-block;
border: 2px solid rgba(0, 0, 0, 0.1);
background: transparent;
color: #252525;
font-size: 1.25em;
padding: 0.65em 2em;
text-transform: uppercase;
position: relative;
overflow: hidden;
}
/* line 19, C:/xampp/htdocs/fs/borderAnimation/scss/style.scss */
.btn:before,
.btn:after {
content: '';
position: absolute;
left: 0;
right: 0;
height: 2px;
background: #ff0000;
transition: all 0.85s;
}
/* line 29, C:/xampp/htdocs/fs/borderAnimation/scss/style.scss */
.btn:before {
top: 0;
transform: translate3d(-105%, 0, 0);
}
/* line 33, C:/xampp/htdocs/fs/borderAnimation/scss/style.scss */
.btn:after {
bottom: 0;
transform: translate3d(105%, 0, 0);
}
/* line 41, C:/xampp/htdocs/fs/borderAnimation/scss/style.scss */
.btn > span:before,
.btn > span:after {
content: '';
position: absolute;
top: 0;
bottom: 0;
width: 2px;
background: #ff0000;
transition: all 0.85s;
}
/* line 51, C:/xampp/htdocs/fs/borderAnimation/scss/style.scss */
.btn > span:before {
left: 0;
transform: translate3d(0, 105%, 0);
}
/* line 55, C:/xampp/htdocs/fs/borderAnimation/scss/style.scss */
.btn > span:after {
right: 0;
transform: translate3d(0, -105%, 0);
}
/* line 65, C:/xampp/htdocs/fs/borderAnimation/scss/style.scss */
.btn:hover:before,
.btn:hover:after,
.btn:active:before,
.btn:active:after,
.btn:focus:before,
.btn:focus:after {
transform: translate3d(0, 0, 0);
}
/* line 71, C:/xampp/htdocs/fs/borderAnimation/scss/style.scss */
.btn:hover > span:before,
.btn:hover > span:after,
.btn:active > span:before,
.btn:active > span:after,
.btn:focus > span:before,
.btn:focus > span:after {
transform: translate3d(0, 0, 0);
}
Now the problem is that the borders i have created using the :before and :after pseudo elements , don't exactly align on top of the border for of the anchor tag, it looks like its 2px inside the button.
I have added the box-sizing:border-box property, but i still get the same result , Why am i not able to align the pseudo elements on top of the anchor border ?
As you can see i have used the following property, but still don't get the desired result:
*,*:before,*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Since the pseudo elements are children of the element they are applied to, in this case the anchor btn, their border won't align on top of the btn but immediate inside it.
Adding box-sizing:border-box doesn't change that. Its purpose is to tell the element that its set border/padding size should be included in its set width.
So either you have to move the pseudo's by giving them a negative position, or, in this case, and the absolute simplest, move some of the properties to the span.
.btn {
display: inline-block;
background: transparent;
position: relative;
overflow: hidden;
}
.btn span {
display: inline-block;
border: 2px solid rgba(0, 0, 0, 0.1);
color: #252525;
font-size: 1.25em;
padding: 0.65em 2em;
text-transform: uppercase;
}
Stack snippet
/* line 1, C:/xampp/htdocs/fs/borderAnimation/scss/style.scss */
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
/* line 8, C:/xampp/htdocs/fs/borderAnimation/scss/style.scss */
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* line 82, C:/xampp/htdocs/fs/borderAnimation/scss/style.scss */
a {
text-decoration: none;
}
/* line 85, C:/xampp/htdocs/fs/borderAnimation/scss/style.scss */
a:hover,
a:active,
a:focus {
text-decoration: none;
}
/* line 93, C:/xampp/htdocs/fs/borderAnimation/scss/style.scss */
.btn {
display: inline-block;
background: transparent;
position: relative;
overflow: hidden;
}
.btn span {
display: inline-block;
border: 2px solid rgba(0, 0, 0, 0.1);
color: #252525;
font-size: 1.25em;
padding: 0.65em 2em;
text-transform: uppercase;
}
/* line 19, C:/xampp/htdocs/fs/borderAnimation/scss/style.scss */
.btn:before,
.btn:after {
content: '';
position: absolute;
left: 0;
right: 0;
height: 2px;
background: #ff0000;
transition: all 0.85s;
}
/* line 29, C:/xampp/htdocs/fs/borderAnimation/scss/style.scss */
.btn:before {
top: 0;
transform: translate3d(-105%, 0, 0);
}
/* line 33, C:/xampp/htdocs/fs/borderAnimation/scss/style.scss */
.btn:after {
bottom: 0;
transform: translate3d(105%, 0, 0);
}
/* line 41, C:/xampp/htdocs/fs/borderAnimation/scss/style.scss */
.btn > span:before,
.btn > span:after {
content: '';
position: absolute;
top: 0;
bottom: 0;
width: 2px;
background: #ff0000;
transition: all 0.85s;
}
/* line 51, C:/xampp/htdocs/fs/borderAnimation/scss/style.scss */
.btn > span:before {
left: 0;
transform: translate3d(0, 105%, 0);
}
/* line 55, C:/xampp/htdocs/fs/borderAnimation/scss/style.scss */
.btn > span:after {
right: 0;
transform: translate3d(0, -105%, 0);
}
/* line 65, C:/xampp/htdocs/fs/borderAnimation/scss/style.scss */
.btn:hover:before,
.btn:hover:after,
.btn:active:before,
.btn:active:after,
.btn:focus:before,
.btn:focus:after {
transform: translate3d(0, 0, 0);
}
/* line 71, C:/xampp/htdocs/fs/borderAnimation/scss/style.scss */
.btn:hover > span:before,
.btn:hover > span:after,
.btn:active > span:before,
.btn:active > span:after,
.btn:focus > span:before,
.btn:focus > span:after {
transform: translate3d(0, 0, 0);
}
/*# sourceMappingURL=../css/style.map */<a href="" class="btn">
<span>
Hover on Me
</span>
</a>