Buttons aren’t displaying in react

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