I’m building a website and I have created two buttons ‘watch trailer’ and ‘get started’ but they are being displayed as two tiny white blocks. Here’s my code, any help would be appreciated.
import React from 'react';
import '../App.css';
import { Button } from './Button';
import './Herosection.css';
import myVideo2 from '../video/video-2.mp4'
function Herosection() {
return (
<div className='hero-container'>
<video src={myVideo2} autoPlay loop muted />
<h1>ADVENTURE AWAITS</h1>
<p>What are you waiting for?</p>
<div className="hero-btns">
<Button
className='btns'
buttonStyle='btn--outline'
buttonSize='btn--large'
>
GET STARTED!
</Button>
<Button
className='btns'
buttonStyle='btn--primary'
buttonSize='btn--large'
>
WATCH TRAILER! <i className='far fa-play-circle'/>
</Button>
</div>
</div>
);
}
export default Herosection;
I’m looking for a fix