samedi 1 juillet 2017

Regular border + offset border on button using CSS

css button with double border

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