diff --git a/contents/_includes/covers/previous-next-buttons.njk b/contents/_includes/covers/previous-next-buttons.njk
new file mode 100644
index 0000000..17f0d69
--- /dev/null
+++ b/contents/_includes/covers/previous-next-buttons.njk
@@ -0,0 +1,8 @@
+
\ No newline at end of file
diff --git a/contents/index.njk b/contents/index.njk
index aea6cad..9ff2b39 100644
--- a/contents/index.njk
+++ b/contents/index.njk
@@ -131,6 +131,7 @@ eleventyExcludeFromCollections: true
{% pattern "Drawer" %}{% include "covers/drawer.njk" %}{% endpattern %}
{% pattern "Menu" %}{% include "covers/menu.njk" %}{% endpattern %}
{% pattern "Pagination" %}{% include "covers/pagination.njk" %}{% endpattern %}
+ {% pattern "Previous next buttons" %}{% include "covers/previous-next-buttons.njk" %}{% endpattern %}
{% pattern "Tab" %}{% include "covers/tab.njk" %}{% endpattern %}
{% pattern "Wizard" %}{% include "covers/wizard.njk" %}{% endpattern %}
diff --git a/contents/previous-next-buttons.md b/contents/previous-next-buttons.md
new file mode 100644
index 0000000..9758dca
--- /dev/null
+++ b/contents/previous-next-buttons.md
@@ -0,0 +1,36 @@
+---
+layout: layouts/post.njk
+title: Previous next buttons
+description: Create previous and next buttons with CSS flexbox
+keywords: css flexbox, css pagination
+---
+
+## HTML
+
+```html
+
+```
+
+## CSS
+
+```css
+.previous-next-buttons {
+ align-items: center;
+ display: flex;
+ justify-content: space-between;
+}
+```
+
+You can use the [arrow buttons](/arrow-buttons/) to create the previous and next buttons.
+
+{% demo %}{% include "covers/previous-next-buttons.njk" %}{% enddemo %}
diff --git a/pages/previous-next-buttons/index.tsx b/pages/previous-next-buttons/index.tsx
deleted file mode 100644
index 17b2923..0000000
--- a/pages/previous-next-buttons/index.tsx
+++ /dev/null
@@ -1,91 +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 (
-
-
-
-
-
-
-
-
-
- ..
-
-
- ..
-
-`}
- css={`
- .container {
- align-items: center;
- display: flex;
- justify-content: space-between;
- }
- `}
- >
-
-
-
- );
-};
-
-export default Details;
diff --git a/patterns/previous-next-buttons/Cover.tsx b/patterns/previous-next-buttons/Cover.tsx
deleted file mode 100644
index fb6776e..0000000
--- a/patterns/previous-next-buttons/Cover.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import * as React from 'react';
-
-import Frame from '../../placeholders/Frame';
-
-const Cover: React.FC<{}> = () => {
- return (
-
-
-
- );
-};
-
-export default Cover;
diff --git a/styles/index.scss b/styles/index.scss
index c3074e9..119b3b1 100644
--- a/styles/index.scss
+++ b/styles/index.scss
@@ -62,6 +62,7 @@
@import './patterns/pagination';
@import './patterns/popover-arrow';
@import './patterns/presence-indicator';
+@import './patterns/previous-next-buttons';
@import './patterns/price-tag';
@import './patterns/pricing-table';
@import './patterns/progress-bar';
diff --git a/styles/patterns/_previous-next-buttons.scss b/styles/patterns/_previous-next-buttons.scss
new file mode 100644
index 0000000..6cc61c0
--- /dev/null
+++ b/styles/patterns/_previous-next-buttons.scss
@@ -0,0 +1,47 @@
+.previous-next-buttons {
+ align-items: center;
+ display: flex;
+ justify-content: space-between;
+
+ /* Demo */
+ width: 100%;
+}
+
+.previous-next-buttons__nav {
+ position: relative;
+
+ /* Demo */
+ border: 1px solid #d1d5db;
+ border-radius: 0.25rem;
+ padding: 0.25rem 0.5rem;
+
+ align-items: center;
+ display: flex;
+ justify-content: center;
+
+ height: 2rem;
+ width: 3rem;
+}
+
+.previous-next-buttons__button {
+ /* Transparent background */
+ background-color: transparent;
+
+ /* Size */
+ height: 0.5rem;
+ width: 0.5rem;
+}
+
+.previous-next-buttons__button--r {
+ /* Edges */
+ border-right: 1px solid #d1d5db;
+ border-top: 1px solid #d1d5db;
+ transform: translateX(-25%) rotate(45deg);
+}
+
+.previous-next-buttons__button--l {
+ /* Edges */
+ border-bottom: 1px solid #d1d5db;
+ border-left: 1px solid #d1d5db;
+ transform: translateX(25%) rotate(45deg);
+}