import React from 'react';
import styled from 'styled-components';
const Button = () => {
return (
);
}
const StyledWrapper = styled.div`
.animated-button {
position: relative;
display: flex;
align-items: center;
gap: 4px;
padding: 16px 36px;
border: 4px solid;
border-color: transparent;
font-size: 16px;
background-color: inherit;
border-radius: 100px;
font-weight: 600;
color: greenyellow;
box-shadow: 0 0 0 2px greenyellow;
cursor: pointer;
overflow: hidden;
transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
.animated-button svg {
position: absolute;
width: 24px;
fill: greenyellow;
z-index: 9;
transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}
.animated-button .arr-1 {
right: 16px;
}
.animated-button .arr-2 {
left: -25%;
}
.animated-button .circle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 20px;
height: 20px;
background-color: greenyellow;
border-radius: 50%;
opacity: 0;
transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}
.animated-button .text {
position: relative;
z-index: 1;
transform: translateX(-12px);
transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}
.animated-button:hover {
box-shadow: 0 0 0 12px transparent;
color: #212121;
border-radius: 12px;
}
.animated-button:hover .arr-1 {
right: -25%;
}
.animated-button:hover .arr-2 {
left: 16px;
}
.animated-button:hover .text {
transform: translateX(12px);
}
.animated-button:hover svg {
fill: #212121;
}
.animated-button:active {
scale: 0.95;
box-shadow: 0 0 0 4px greenyellow;
}
.animated-button:hover .circle {
width: 220px;
height: 220px;
opacity: 1;
}`;
export default Button;
