Как сделать кнопку-круг дугой?

Question

Подскажите, как можно сделать кнопку которая на картинке? Линия дугой, но при hover линия круглая

Answer 1

Если попроще, то можно обойтись вариантом с border:

* {
  padding: 0;
}

body {
  background: #f5f5f5;
}

.circle {
  background: transparent;
  width: 100px;
  height: 100px;
  border-radius: 100px;
  border: 1px solid transparent;
  border-right-color: #555;
  transition: 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(-45deg);
}

.circle span {
  transform: rotate(45deg);
}

.circle:hover {
  border: 1px solid #555;
}

<button class="circle">
  <span>Button</span>
</button>

Если всё же нужны нормальные анимации и гибкость (определенный процент заполнения и т.п), то без SVG уже никуда:

* {
  padding: 0;
}

body {
  background: #f5f5f5;
}

.circle {
  background: transparent;
  width: 102px;
  height: 102px;
  border: none;
  position: relative;
}

.circle span {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.circle svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.circle svg circle {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: none;
  stroke-width: 1;
}

.circle svg circle {
  stroke-dasharray: 360 360;
  stroke-dashoffset: 270;
  stroke: #222;
  transition: 0.5s ease;
}

.circle:hover svg circle {
  stroke-dashoffset: 0;
}

<button class="circle">
  <svg>
    <circle cx="50" cy="50" r="50"></circle>
   </svg>
    <span>
      Button
    </span>
</button>

Answer 2

Анимация немного странная, но вроде выглядит прикольно:

button {
  border: none;
  width: 2em;
  line-height: 2em;
  padding: 0;
  text-align: center;
  position: relative;
  border-radius: 50%;
  background: transparent;
  font-size: 2em;
  color: blue;
}

button::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid;
  border-radius: inherit;
  clip-path: polygon(50% 0, 100% 0, 100% 50%, 50% 50%);
  transition: clip-path .3s;
}

button:hover:before {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

<button>⇗</button>

В принципе, можно немного похимичить с формой:

button {
  border: none;
  width: 2em;
  line-height: 2em;
  padding: 0;
  text-align: center;
  position: relative;
  border-radius: 50%;
  background: transparent;
  font-size: 2em;
  color: blue;
}

button::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid;
  border-radius: inherit;
  clip-path: polygon(50% 0, 100% 0, 100% 50%, 50% 50%, 50% 50%);
  transition: clip-path .3s;
}

button:hover:before {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 30% 100%, 0 71%);
}

<button>⇗</button>

БЛОГ НА HUSL

Как сделать кнопку-круг дугой?

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