Hello guys i need your help

I want to do that: Model Botton

The problem is that, when i add a filter

filter: drop-shadow(3px 4px 0px #0000B8);

to my button the result is: My Botton

Can you help me please ?

CodePudding user response：

There are multiple ways of doing it.

Here are some examples:

.button-1 {
  position: relative;
  color: #ff1800;
  background-color: white;
  font-size: 1.2em;
  font-weight: bold;
  border: 2px solid #ff1800;
  padding: 15px;
  border-radius: 100px;
}

.button-1::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: transparent;
  border: 2px solid #ff1800;
  border-radius: 100px;
  filter: drop-shadow(7px 12px 0px #0000B8);
  z-index: -1;
}

.button-2 {
  color: #ff1800;
  background-color: transparent;
  font-size: 1.2em;
  font-weight: bold;
  border: 2px solid #ff1800;
  padding: 15px;
  border-radius: 100px;
  box-shadow: 5px 10px 0 -2px white,
    5px 10px 0 0 #0000B8;
}

.button-3 {
  position: relative;
  color: #ff1800;
  background-color: white;
  font-size: 1.2em;
  font-weight: bold;
  border: 2px solid #ff1800;
  padding: 15px;
  border-radius: 100px;
}

.button-3::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  left: 4px;
  top: 8px;
  right: 0;
  bottom: 0;
  background-color: transparent;
  border: 2px solid #0000B8;
  border-radius: 100px;
  z-index: -1;
}

<button >
  Become a seller
</button>

<button >
  Become a seller
</button>

<button >
  Become a seller
</button>

Sadly, none of the methods can have a complete transparent background.