Skip to content

Instantly share code, notes, and snippets.

@sazzad24x7

sazzad24x7/custom antd button in styled components

Created May 24, 2019 23:07
Show Gist options
  • Save sazzad24x7/79a28a432c264b8ddf959c61d3087eba to your computer and use it in GitHub Desktop.
Save sazzad24x7/79a28a432c264b8ddf959c61d3087eba to your computer and use it in GitHub Desktop.
Download ZIP
Raw
custom antd button in styled components
styled.button`
position: relative;
height: 40px;
padding: 0 15px;
font-size: 16px;
margin: 0 0.5em;
background: ${props => (props.active ? "#f5f5f5" : "rgba(256,256,256,0.5)")};
border: none;
border-radius: 0.18em;
outline: none;
cursor: pointer;
transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
&:hover {
background: rgba(256, 256, 256, 0.8);
box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2),
0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
}
&:focus {
outline: none;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment