diff --git a/src/components/RedButton/RedButton.js b/src/components/RedButton/RedButton.js
new file mode 100644
index 0000000..e445a39
--- /dev/null
+++ b/src/components/RedButton/RedButton.js
@@ -0,0 +1,28 @@
+import * as classes from './style.module.scss';
+
+export const RED_BUTTON_COMPONENT_NAME = 'red-button-component';
+
+class Button extends HTMLElement {
+  constructor() {
+    super();
+    this._contents = new DocumentFragment();
+
+    this.redButton = Button.redButtonBuilder();
+
+    this._contents.appendChild(this.redButton);
+  }
+
+  connectedCallback() {
+    this.appendChild(this._contents);
+  }
+
+  static redButtonBuilder(caption) {
+    const redButton = document.createElement('button');
+    redButton.className = classes.redButton;
+    redButton.innerText = caption;
+
+    return redButton;
+  }
+}
+
+customElements.define(RED_BUTTON_COMPONENT_NAME, Button);
diff --git a/src/components/RedButton/style.modules.scss b/src/components/RedButton/style.modules.scss
new file mode 100644
index 0000000..21c9c75
--- /dev/null
+++ b/src/components/RedButton/style.modules.scss
@@ -0,0 +1,14 @@
+@use '../../themes/theme.scss' as *;
+
+.red-button {
+  background-color: red;
+  border: none;
+  border-radius: $border-radius;
+  box-shadow: $red-box-shadow;
+  color: white;
+  font-family: $font-family;
+  font-weight: 400;
+  font-size: 2em;
+  text-transform: uppercase;
+  width: 100%;
+}