Bootstrapに上書きして、いい感じに使う（SCSSなし） ref: https://qiita.com/Shino_JK/items/34d7e4676dcc4ed430d8

bootstrap_button_sns.css

.bg-twitter {
    background-color: #55acee;
    text: #FFF;
}

.bg-mastodon {
    background-color: #2b90d9;
    text: #FFF;
}

.bg-facebook {
    background-color: #3b5998;
    text: #FFF;
}

.bg-linkedin {
    background-color: #0079ba;
    text: #FFF;
}

.bg-github {
    background-color: #333;
    text: #FFF;
}

.bg-qiita {
    background-color: #79bd28;
    text: #FFF;
}

.bg-misskey {
    background-color: #00acc1;
    text: #FFF;
}

.bg-soundcloud{
    background-color: #ff3300;
    text: #FFF;
}

file0.txt

    <link rel="stylesheet" href="./css/bootstrap.min.css">

file1.txt

    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/my-sheet.css">

file2.txt

<btn class="btn btn-success">ログイン</a>

file7.txt

    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/my-sheet.css">
    <link rel="stylesheet" href="./css/bootstrap_button_sns.css">

file9.txt

<a href="" class="btn bg-twitter text-left"><i class="fab fa-twitter fa-fw"></i> Twitter</a>

my-sheet.css

:root{
    --font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, "游ゴシック体", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

body {
    font-family: "Helvetica Neue", Helvetica, Arial, "游ゴシック体", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, 'Open Sans', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Helvetica Neue", Helvetica, Arial, "游ゴシック体", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, 'Open Sans', sans-serif;
}