index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Знайомтесь, <button>кнопка</button></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="node_modules/@shower/material/styles/styles.css">
    <style>
        .shower {
            --slide-ratio: calc(16 / 9);
        }
    </style>
</head>
<body class="shower list">
    <header class="caption">
        <h1>Знайомтесь, <button>кнопка</button></h1>
        <p>@gingano</p>
    </header>

    <section class="slide" id="cover">
        <h2 class="shout shrink">Знайомтесь, <button>кнопка</button></h2>
    </section>

    <footer class="badge">
		<a href="https://github.com/gingano/accessability-button">
			<svg width="81" height="79" viewBox="0 0 81 79" aria-hidden="true">
				<path d="M40.5 0a40.5 40.5 0 0 0-12.8 78.93c2 .37 2.76-.88 2.76-2s0-3.51-.05-6.89c-11.27 2.45-13.64-5.43-13.64-5.43-1.84-4.68-4.5-5.92-4.5-5.92-3.68-2.51.28-2.46.28-2.46 4.06.29 6.2 4.17 6.2 4.17 3.61 6.19 9.48 4.4 11.79 3.37a8.65 8.65 0 0 1 2.57-5.41c-9-1-18.45-4.5-18.45-20a15.65 15.65 0 0 1 4.17-10.87 14.57 14.57 0 0 1 .4-10.72s3.4-1.09 11.14 4.15a38.39 38.39 0 0 1 20.28 0c7.73-5.24 11.13-4.15 11.13-4.15a14.55 14.55 0 0 1 .4 10.72 15.63 15.63 0 0 1 4.16 10.87c0 15.56-9.47 19-18.49 20 1.45 1.25 2.75 3.72 2.75 7.5v11.11c0 1.08.73 2.34 2.78 1.95A40.51 40.51 0 0 0 40.5 0z"></path>
			</svg>
			Fork&nbsp;me<br>on&nbsp;GitHub
		</a>
	</footer>

    <div class="progress"></div>

    <script src="node_modules/@shower/core/dist/shower.js"></script>
    <!-- Copyright © 3000 Yours Truly, Famous Inc. -->

</body>
</html>