В примере YouTube, который вы показали, он не показывает вам файл CSS.Но я думаю, что он использует начальную загрузку для определения имени класса, вот что вы можете попробовать:
Скопируйте и вставьте ссылку на таблицу стилей в вашу голову перед всеми другими таблицами стилей для загрузки нашего CSS.
<head>
<meta charset="utf-8">
<title>Firebase Web Quickstart</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://www.gstatic.com/firebasejs/live/3.1/firebase.js"></script>
</head>
Обратите внимание, что это CDN, вы также можете загрузить самозагрузку и добавить файл по локальному пути.
Обновление, видео на YouTube использует пользовательский CSS, похожий на самозагрузку, но это не так ...используйте классы начальной загрузки для кнопки, см. ниже:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Firebase Web Quickstart</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script
src="https://www.gstatic.com/firebasejs/live/3.1/firebase.js">
</script>
</head>
<body>
<div class="container">
<input id="txtEmail" type="email" placeholder="Email">
<input id="txtPassword" type="password" placeholder="Password">
<button id="btnLogin" class="btn btn-primary">
Log in
</button>
<button id="btnSignUp" class="btn btn-secondary">
Sign Up
</button>
<button id="btnLogout" class="btn btn-danger" hidden>
Log out
</button>
</div>
<script src="app.js"></script>
</body>
</html>
Это классы, которые вы можете использовать:
https://getbootstrap.com/docs/4.0/components/buttons/
