Question

我想创建一个带有shutter out horizontal effect的按钮，就像链接的按钮一样。我尝试从上面的链接中复制位，但是无法达到效果...我该如何实现？

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

最终设法实现了它。它位于代码沙箱中：Styled Component button with shutter out animation on hover。

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);
    }
  }
`;

带阴影的按钮，带有样式化组件的水平效果

1 个答案: