Кнопка с горизонтальным эффектом затвора со стилизованными компонентами - PullRequest
Новая
       8

Кнопка с горизонтальным эффектом затвора со стилизованными компонентами

0 голосов
/ 13 ноября 2018

Я хотел бы создать кнопку с горизонтальным эффектом затвора , подобным связанному.Я попытался скопировать биты из вышеупомянутых ссылок, но не смог добиться эффекта ... как мне этого добиться? 

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

1 Ответ

0 голосов
/ 14 ноября 2018

Наконец-то удалось это реализовать. Он находится в песочнице кода: Кнопка «Стилизованный компонент» с анимацией затвора при наведении курсора . 

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