add standard button
This commit is contained in:
13
kivi-cars/src/components/Button/StandardBtn.js
Normal file
13
kivi-cars/src/components/Button/StandardBtn.js
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
import './button.css'
|
||||||
|
|
||||||
|
var title = "DALJE";
|
||||||
|
const StandardBtn = (props) => {
|
||||||
|
return (
|
||||||
|
<div className='standard-btn'>
|
||||||
|
|
||||||
|
<button className='standardBtn'>{title}</button>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default StandardBtn
|
||||||
@@ -0,0 +1,32 @@
|
|||||||
|
.standard-btn {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.standardBtn {
|
||||||
|
width: fit-content;
|
||||||
|
background-color: #02ADBA;
|
||||||
|
font-size: 15px;
|
||||||
|
padding: 7px 20px 7px 20px;
|
||||||
|
color: white;
|
||||||
|
border: #02ADBA;
|
||||||
|
}
|
||||||
|
|
||||||
|
.standardBtn:hover {
|
||||||
|
background-color:#3eced8 ;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left-button {
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
.left-button:hover {
|
||||||
|
background-color:#9eedf3
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-button {
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
.right-button:hover {
|
||||||
|
background-color:#9eedf3
|
||||||
|
|
||||||
|
}
|
||||||
@@ -6,7 +6,6 @@ const leftBtn = (props) => {
|
|||||||
<div className='left-button'>
|
<div className='left-button'>
|
||||||
<ArrowLeft/>
|
<ArrowLeft/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -3,7 +3,10 @@ import { ReactComponent as ArrowRight } from '../../assets/arrow-right.svg';
|
|||||||
|
|
||||||
const rightBtn = (props) => {
|
const rightBtn = (props) => {
|
||||||
return (
|
return (
|
||||||
<ArrowRight/>
|
<div className='right-button'>
|
||||||
|
<ArrowRight/>
|
||||||
|
</div>
|
||||||
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -3,15 +3,18 @@ import React from 'react';
|
|||||||
import Filters from '../components/Filters';
|
import Filters from '../components/Filters';
|
||||||
import Header from '../components/Header/Header';
|
import Header from '../components/Header/Header';
|
||||||
import ButtonsToolbar from '../components/ButtonsToolbar/ButtonsToolbar';
|
import ButtonsToolbar from '../components/ButtonsToolbar/ButtonsToolbar';
|
||||||
|
import StandardBtn from '../components/Button/StandardBtn'
|
||||||
function App() {
|
function App() {
|
||||||
|
|
||||||
const info = 'Dobrodosli na stranicu kivi!'
|
const info = 'Dobrodosli na stranicu kivi!'
|
||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="App">
|
<div className="App">
|
||||||
<Header header={info}/>
|
<Header header={info}/>
|
||||||
<ButtonsToolbar/>
|
<ButtonsToolbar/>
|
||||||
|
<StandardBtn/>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
);
|
);
|
||||||
|
|||||||
Reference in New Issue
Block a user