diff --git a/contents/_includes/patterns/upload-button.njk b/contents/_includes/patterns/upload-button.njk
new file mode 100644
index 0000000..7a32bd0
--- /dev/null
+++ b/contents/_includes/patterns/upload-button.njk
@@ -0,0 +1,9 @@
+
\ No newline at end of file
diff --git a/contents/index.njk b/contents/index.njk
index c3e1fc9..f951bf8 100644
--- a/contents/index.njk
+++ b/contents/index.njk
@@ -99,6 +99,7 @@ eleventyExcludeFromCollections: true
{% pattern "Spin button" %}{% include "patterns/spin-button.njk" %}{% endpattern %}
{% pattern "Stepper input" %}{% include "patterns/stepper-input.njk" %}{% endpattern %}
{% pattern "Switch" %}{% include "patterns/switch.njk" %}{% endpattern %}
+ {% pattern "Upload button" %}{% include "patterns/upload-button.njk" %}{% endpattern %}
diff --git a/contents/upload-button.md b/contents/upload-button.md
new file mode 100644
index 0000000..7da5511
--- /dev/null
+++ b/contents/upload-button.md
@@ -0,0 +1,57 @@
+---
+layout: layouts/post.njk
+title: Upload button
+description: Create an upload button with CSS flexbox
+keywords: css file input, css flexbox, css upload button
+---
+
+## HTML
+
+```html
+
+```
+
+## CSS
+
+```css
+.upload-button {
+ /* Used to position the input */
+ position: relative;
+
+ /* Center the content */
+ align-items: center;
+ display: flex;
+
+ /* Border */
+ border: 1px solid #d1d5db;
+ border-radius: 0.25rem;
+ padding: 0.25rem 0.5rem;
+}
+
+.upload-button__input {
+ /* Take the full size */
+ height: 100%;
+ left: 0;
+ position: absolute;
+ top: 0;
+ width: 100%;
+
+ /* Make it transparent */
+ opacity: 0;
+}
+
+.upload-button__icon {
+ margin-right: 0.5rem;
+}
+```
+
+{% demo %}{% include "patterns/upload-button.njk" %}{% enddemo %}
diff --git a/pages/upload-button/index.tsx b/pages/upload-button/index.tsx
deleted file mode 100644
index ce13a3e..0000000
--- a/pages/upload-button/index.tsx
+++ /dev/null
@@ -1,125 +0,0 @@
-import * as React from 'react';
-import Head from 'next/head';
-
-import { Pattern } from '../../constants/Pattern';
-import { PatternLayout } from '../../layouts/PatternLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-import Rectangle from '../../placeholders/Rectangle';
-
-const Details: React.FC<{}> = () => {
- return (
-
-
-
-
-
-
-
- You can click the button to choose a file.
-
-
-
-
-
- ...
-
-
- ...
-
-`}
- css={`
- .container {
- /* Used to position the input */
- position: relative;
-
- /* Center the content */
- align-items: center;
- display: flex;
-
- /* Border */
- border: 1px solid #d1d5db;
- }
-
- .container__input {
- /* Take the full size */
- height: 100%;
- left: 0;
- position: absolute;
- top: 0;
- width: 100%;
-
- /* Make it transparent */
- opacity: 0;
- }
-
- .container__icon {
- margin-right: 8px;
- }
- `}
- >
-
-
-
- );
-};
-
-export default Details;
diff --git a/patterns/upload-button/Cover.tsx b/patterns/upload-button/Cover.tsx
deleted file mode 100644
index 5ad30ac..0000000
--- a/patterns/upload-button/Cover.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import * as React from 'react';
-
-import Frame from '../../placeholders/Frame';
-import Rectangle from '../../placeholders/Rectangle';
-
-const Cover: React.FC<{}> = () => {
- return (
-
-
-
- );
-};
-
-export default Cover;
diff --git a/styles/index.scss b/styles/index.scss
index a037d1d..47b1ff4 100644
--- a/styles/index.scss
+++ b/styles/index.scss
@@ -80,6 +80,7 @@
@import './patterns/tooltip';
@import './patterns/tree-diagram';
@import './patterns/triangle-buttons';
+@import './patterns/upload-button';
@import './patterns/validation-icon';
@import './patterns/video-background';
@import './patterns/voting';
diff --git a/styles/patterns/_upload-button.scss b/styles/patterns/_upload-button.scss
new file mode 100644
index 0000000..40e6308
--- /dev/null
+++ b/styles/patterns/_upload-button.scss
@@ -0,0 +1,41 @@
+.upload-button {
+ /* Used to position the input */
+ position: relative;
+
+ /* Center the content */
+ align-items: center;
+ display: flex;
+
+ /* Border */
+ border: 1px solid #d1d5db;
+ border-radius: 0.25rem;
+ padding: 0.25rem 0.5rem;
+
+ /* Demo */
+ width: 8rem;
+}
+
+.upload-button__input {
+ /* Take the full size */
+ height: 100%;
+ left: 0;
+ position: absolute;
+ top: 0;
+ width: 100%;
+
+ /* Make it transparent */
+ opacity: 0;
+}
+
+.upload-button__icon {
+ margin-right: 0.5rem;
+}
+.upload-button__svg {
+ fill: none;
+ height: 1.5rem;
+ stroke: #d1d5db;
+ stroke-linecap: round;
+ stroke-linejoin: round;
+ stroke-width: 1;
+ width: 1.5rem;
+}