Кнопка со скошенным углом и эффекты для неё

Question

Кто то работал с кнопкой со срезанным углом? В интернете есть советы как её сделать (использование clip-path и псевдоэлемента).

Но задача усложняется тем, что нужно навесить эффекты на такую кнопку, а именно свечение при hover-е.

И это получается, но из за clip-path свечение не распространяется наружу и псевдоэлемент плохо получается отсветить.

Может кто то решал что то подобное

Answer 1

Увы, такие элементы тяжело создаются, в связи с тем, что CSS не умеет создавать подобного рода объекты, чтобы адекватно использовались обводки, тени и т.п.

Но, можно колхозить, например воссоздать такую обводку при помощи linear-gradient.
Тень при ховере при помощи этого же linear-gradient, но уже на псевдоэлементе, который будет лежать слоем ниже.
А вот с "заливкой" пришлось подумать и умнее не придумал, как использовать псевдоэлемент, но уже с clip-path.
_{(Почему так, а чтобы clip-path на кнопку не "съедал" тень)}

И в итоге получилось вот такое:

@import 'https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap';
body {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1em;
  width: 100%;
  min-height: 100vh;
  background-color: #000;
  font-family: 'Roboto', sans-serif;
  color: #fff;
  overflow: hidden auto;
  margin: 0;
}

.chamfered-corner {
  --accent-color: #ff881a; /* Цвет обводки и заливки */
  --border-width: 1px; /* Толщина обводки */
  --skew-width: 15px; /* Ширина "скошенного угла" */
  --skew-height: 15px; /* Высота "скошенного угла" */
  display: block;
  border: 0;
  background-color: transparent;
  padding: 1em;
  font-weight: 700;
  font-size: 16px;
  color: #fff;
  position: relative;
  cursor: pointer;
  transition: color .3s ease;
}

.chamfered-corner,
.chamfered-corner::before {
  background-image:
    linear-gradient(var(--accent-color) 0 0),
    linear-gradient(var(--accent-color) 0 0),
    linear-gradient(to left top,
      transparent calc(50% - var(--border-width) / 1.15),
      var(--accent-color) calc(50% - var(--border-width) / 2),
      var(--accent-color) calc(50% + var(--border-width) / 2),
      transparent calc(50% + var(--border-width) / 1.15)),
      linear-gradient(var(--accent-color) 0 0),
      linear-gradient(var(--accent-color) 0 0
    );
  background-repeat: no-repeat;
  background-position: 0 0, 100% 0, 100% 100%, 0 100%, 0 100%;
  background-size: 
    100% var(--border-width),
    var(--border-width) calc(100% - var(--skew-height)),
    var(--skew-width) var(--skew-height),
    calc(100% - var(--skew-height)) var(--border-width),
    var(--border-width) 100%;
}

.chamfered-corner::before,
.chamfered-corner::after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
}

.chamfered-corner::before {
  --border-width: 3px; /* Толщина обводки увеличена, чтобы тень была более насыщенной */
  filter: blur(5px);
  opacity: 0;
  transition: opacity .3s ease;
}

.chamfered-corner::after {
  -webkit-clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - var(--skew-height)),
    calc(100% - var(--skew-width)) 100%,
    0 100%
  );
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - var(--skew-height)),
    calc(100% - var(--skew-width)) 100%,
    0 100%
  );
  transition: background-color .3s ease;
}

.chamfered-corner:hover::before {
  opacity: .65;
}

.chamfered-corner:active::before {
  opacity: 1;
}

.chamfered-corner:active::after {
  background-color: var(--accent-color);
}

.chamfered-corner--blue {
  --accent-color: #73e4ec;
}

.chamfered-corner--blue:active {
  color: #000;
}

<button class="chamfered-corner">Позвонить нам</button>

<button class="chamfered-corner chamfered-corner--blue">ВСтаке</button>

БЛОГ НА HUSL

Кнопка со скошенным углом и эффекты для неё

Ответы (1 шт):