I'm trying to acheive the same border effect on the button above.
The closest I can get is the following, but the bottom right corner of the bottom border is not properly rounded:
>
.login__button {
background: transparent;
border: none;
border-width: 2px 1px 2px 2px;
border-style: solid;
border-color: pink;
border-radius: 4px;
color: pink;
margin-bottom: 100px;
position: relative !important;
text-transform: uppercase;
height: 33px;
width: 102px;
box-shadow:
3.5px 4px 0px black,
1.5px 0px 0px pink,
3.5px 4px 0px black,
2px 6px 0px pink;
}
.login__button::before {
background: pink;
content: '';
position: absolute;
height: 35px;
width: 3.0px;
border-radius: 3px;
top: 3%;
right: -2.8px;
}
>
I feel like this should be possible using just box-shadows but there doesnt appear to be a way to modify the width of the box shadow to get just the black portion inset properly.
Aucun commentaire:
Enregistrer un commentaire