Skip to content

Instantly share code, notes, and snippets.

@zapmal

zapmal/PromptButton.jsx

Last active February 21, 2021 22:11
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save zapmal/b3e5621686de38b4588d7ac22f51e853 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save zapmal/b3e5621686de38b4588d7ac22f51e853 to your computer and use it in GitHub Desktop.
Download ZIP
Button with animated prompt using React.
Raw
PromptButton.jsx
import React from 'react';
import styled from 'styled-components/macro';
/**
* Can be changed to <a/> or <Link/>.
*/
const Prompt = styled.button`
padding: 18px;
font-size: 18px;
background-color: transparent;
border: 4px solid #ffffff;
border-radius: 10px;
color: #ffffff;
cursor: pointer;
strong {
color: #ffffff;
transition: all .2s;
}
&:hover strong {
box-shadow: 0 4px 0 -2px #ffffff;
}
span::before {
content: '';
margin-left: 10px;
border: solid #ffffff;
border-width: 0 2px 2px 0;
display: inline-block;
padding: 4px;
transform: rotate(-45deg) translateY(-1px);
transition: transform .2s cubic-bezier(.4, 0, .2, 1);
}
&:hover span::before {
transform: rotate(-45deg) translateY(8px) translateX(8px);
}
span::after {
content: '';
display: inline-block;
background-color: #ffffff;
height: 2px;
width: 10px;
margin-left: .25em;
transition: transform .2s cubic-bezier(.4,0,.2,1);
animation: blink 1s infinite;
}
&:hover span::after {
transform: translateX(-5px) translateY(-4px) scaleX(1.5);
animation: none;
}
@keyframes blink {
0% { opacity: 0; }
25% { opacity: .2; }
50% { opacity: .5; }
75% { opacity: .7; }
100% { opacity: 1; }
}
`;
/**
* If a <strong> is passed it will highlight it.
* Example:
* <PromptButton>
* <strong>My message</strong>
* <span></span> -> empty span is for the prompt.
* </PromptButton>
*/
const PromptButton = ({ children }) => {
return (
<Prompt>
{children}
</Prompt>
);
};
export default PromptButton;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment