小编kan*_*nna的帖子

我正在试图想出一种让按钮为其边框设置动画的方法,就好像有人正在绘制它一样.

我到目前为止最接近的是这个片段,尽管它对边框半径设置不起作用.(看角落)

https://codepen.io/anon/pen/MbWagQ

<button class="draw">draw</button>

//Colors
$cyan: #60daaa;
$red: #f45e61;

// Basic styles
button {
  background: none;
  border: 0;
  box-sizing: border-box;
  color: $red;
  font-size: inherit;
  font-weight: 700;
  padding: 1em 2em;
  text-align: center;
  margin: 20px;

  // Required, since we're setting absolute on pseudo-elements
  position: relative;
  vertical-align: middle;

  &::before,
  &::after {
    box-sizing: border-box;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
  }
}

.draw {
    transition: color 0.25s;
    border-radius: 7px;

  &::before,
  &::after {
    border-radius: 7px;
    border: 3px solid transparent; // Set border …