Skip to content

Commit

Permalink
fix(buttons): added styled input button
Browse files Browse the repository at this point in the history
  • Loading branch information
HoseaCodes committed Nov 6, 2021
1 parent a439a31 commit c2334bf
Showing 1 changed file with 52 additions and 0 deletions.
52 changes: 52 additions & 0 deletions src/Layout/Form/styledInput.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
import styled, {css, keyframes} from 'styled-components';

const personalbtn = keyframes`
0% {
left: 250%;
}
100% {
left: 0%;
}
`;

export const StyledFormSubmit = styled.input`
border: 2px solid #204740;
box-sizing: inherit;
cursor: pointer;
display: inline-block;
font-size: 1.8em;
margin-bottom: 10px;
padding: 10px 20px;
background-color: transparent;
transition: all 0.5s;
text-decoration: none;
left: 35%;
overflow: hidden;
animation: ${personalbtn} 10s steps(1) -1s normal;
color: #fff;
border-color: #fff;
&:hover {
text-decoration: none;
border-color: #206a5d;
background-color: #204740;
color: #fff;
}
${props => props.Primary && css`
display: flex;
justify-content: center;
text-transform: uppercase;
text-align: center;
white-space: nowrap;
width: fit-content;
margin: 0 auto;
&:hover {
transition: 0.5s color ease;
}
@media only screen and (min-device-width: 375px) and (max-device-width: 1180px) {
width: 20%;
margin: auto;
bottom: 0 !important;
width: 40%;
}
`}
`;

0 comments on commit c2334bf

Please sign in to comment.