styled components button

Binod Nayak answered on July 28, 2022 Popularity 9/10 Helpfulness 1/10

answer styled components button

related styled button html

styled components button

Comment

-2

const Button = styled.button`
  background: blue;
  border-radius: 3px;
  border: 2px solid ;
  color: white;
  margin: 0.5em 1em;
  padding: 0.25em 1em;
  
  ${props => props.link && css`
    background: transparent;
    color: blue;
  `}
  ${props => props.primary && css`
    background: transparent;
    color: black;
  `}
  ${props => props.sec && css`
    background: transparent;
    color: black;
     border: 2px dashed black ;
    
  `}
  ${props => props.def && css`
    background: transparent;
    color: black;
     border: 2px solid black ;
    
  `}
`;

const Container = styled.div`
  text-align: center;
`

render(
  <Container>
    <Button>Primary Button</Button>
    <Button def>Default Button</Button>
    <Button sec>sec Button</Button>
    <Button primary>text button</Button>
    
    <Button link>link Button</Button>
    
  </Container>
);
Primary ButtonDefault Buttonsec Buttontext buttonlink Button

Popularity 9/10 Helpfulness 1/10 Language whatever

Source: styled-components.com

Tags: button styled-components whatever

Link to this answer
Share Copy Link

Contributed on Aug 29 2022

Binod Nayak

0 Answers Avg Quality 2/10

Closely Related Answers

styled button html

Comment

<style>
	.button {
	background-color: #4CAF50;
	border: none;
	color: white;
	padding: 15px 32px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	margin: 4px 2px;
	cursor: pointer;
  }
</style>

<button class="button">Styled Button</button>

Popularity 9/10 Helpfulness 5/10 Language html

Source: Grepper

Tags: button bu

Link to this answer
Share Copy Link

Contributed on Jul 28 2022

Kai Simpson

0 Answers Avg Quality 2/10

styled components button

Contents

More Related Answers

styled components button

Closely Related Answers

styled button html

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.