带样式化组件的快门输出水平效果按钮

Question

我想创建一个具有快门水平效果的按钮，就像链接的按钮一样。我试着复制上面链接的部分，但无法达到效果。。。我该如何做到这一点？

export const Button = styled.button`
  background-color: gold;
  border: none;
  width: 100%;
  color: #000;
  font-size: 1.25rem;
  font-family: 'Roboto';
  text-transform: uppercase;
  font-weight: bold;
  padding: 10px 0;
  border-radius: 8px;
  text-decoration: none;
  & > a {
    display: block;
    text-decoration: none;
    color: black;
    &:before {
      content: '';
      position: absolute;
      z-index: -999;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background: black;
    }
    &:hover {
      color: white;
    }
    &:visited {
      color: indigo;
    }
  }
`

Answer 1

终于实现了它。它在代码沙盒上：悬停时带有快门动画的样式化组件按钮。

import styled from "styled-components";
// Create a <Title> react component that
// renders an <h1> which is centered, palevioletred and sized at 1.5em
export default styled.button`
  position: relative;
  background-color: gold;
  border: none;
  border-radius: 8px;
  color: #000;
  font-size: 1.25rem;
  text-transform: uppercase;
  font-weight: bold;
  padding: 10px 0;
  width: 100%;
  z-index: 1;
  &:before {
    border-radius: 8px;
    content: "";
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    color: cyan;
    background: cyan;
    position: absolute;
    z-index: -1;
    transform: scaleX(0);
    transform-origin: 50%;
    transition: transform ease-in-out 0.5s;
  }
  &:hover {
    &:before {
      transform: scaleX(1);
    }
  }
`;