diff --git a/client/constants/Pattern.ts b/client/constants/Pattern.ts
index 65740ae..dc0ce5a 100644
--- a/client/constants/Pattern.ts
+++ b/client/constants/Pattern.ts
@@ -5,6 +5,7 @@
 
 enum Pattern {
     Accordion = 'Accordion',
+    ArrowButtons = 'Arrow buttons',
     Avatar = 'Avatar',
     AvatarList = 'Avatar list',
     Badge = 'Badge',
diff --git a/client/pages/ExplorePage.tsx b/client/pages/ExplorePage.tsx
index 52cb216..d2ffae3 100644
--- a/client/pages/ExplorePage.tsx
+++ b/client/pages/ExplorePage.tsx
@@ -148,6 +148,7 @@ const ExplorePage = () => {
 
                     <div style={{ display: 'flex', flexWrap: 'wrap', padding: '32px' }}>
                         <CoverCard pattern={Pattern.Accordion} />
+                        <CoverCard pattern={Pattern.ArrowButtons} />
                         <CoverCard pattern={Pattern.Avatar} />
                         <CoverCard pattern={Pattern.AvatarList} />
                         <CoverCard pattern={Pattern.Badge} />
diff --git a/client/patterns/arrow-buttons/Cover.tsx b/client/patterns/arrow-buttons/Cover.tsx
new file mode 100644
index 0000000..8635c58
--- /dev/null
+++ b/client/patterns/arrow-buttons/Cover.tsx
@@ -0,0 +1,82 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
+import React from 'react';
+
+import Frame from '../../placeholders/Frame';
+
+const Cover: React.FC<{}> = () => {
+    return (
+        <Frame>
+            <div
+                style={{
+                    alignItems: 'center',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    height: '100%',
+                    justifyContent: 'center',
+                    padding: '24px',
+                }}
+            >
+                <div style={{ height: '100%', position: 'relative', width: '100%' }}>
+                    <div
+                        style={{
+                            backgroundColor: '#FFF',
+                            borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
+                            borderTop: '1px solid rgba(0, 0, 0, 0.3)',
+                            height: '16px',
+                            left: '50%',
+                            position: 'absolute',
+                            top: 0,
+                            transform: 'translate(-50%, -50%) rotate(45deg)',
+                            width: '16px',
+                        }}
+                    />
+                    <div
+                        style={{
+                            backgroundColor: '#FFF',
+                            borderRight: '1px solid rgba(0, 0, 0, 0.3)',
+                            borderTop: '1px solid rgba(0, 0, 0, 0.3)',
+                            height: '16px',
+                            position: 'absolute',
+                            right: 0,
+                            top: '50%',
+                            transform: 'translate(50%, -50%) rotate(45deg)',
+                            width: '16px',
+                        }}
+                    />
+                    <div
+                        style={{
+                            backgroundColor: '#FFF',
+                            borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
+                            borderRight: '1px solid rgba(0, 0, 0, 0.3)',
+                            bottom: '-16px',
+                            height: '16px',
+                            left: '50%',
+                            position: 'absolute',
+                            transform: 'translate(-50%, -50%) rotate(45deg)',
+                            width: '16px',
+                        }}
+                    />
+                    <div
+                        style={{
+                            backgroundColor: '#FFF',
+                            borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
+                            borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
+                            height: '16px',
+                            left: 0,
+                            position: 'absolute',
+                            top: '50%',
+                            transform: 'translate(-50%, -50%) rotate(45deg)',
+                            width: '16px',
+                        }}
+                    />
+                </div>
+            </div>
+        </Frame>
+    );
+};
+
+export default Cover;
diff --git a/client/patterns/arrow-buttons/Details.tsx b/client/patterns/arrow-buttons/Details.tsx
new file mode 100644
index 0000000..ccbcab9
--- /dev/null
+++ b/client/patterns/arrow-buttons/Details.tsx
@@ -0,0 +1,292 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
+import React from 'react';
+import { Helmet } from 'react-helmet';
+
+import RelatedPatterns from '../../components/RelatedPatterns';
+import Pattern from '../../constants/Pattern';
+import DetailsLayout from '../../layouts/DetailsLayout';
+import BrowserFrame from '../../placeholders/BrowserFrame';
+
+const Details: React.FC<{}> = () => {
+    return (
+        <DetailsLayout title="Arrow buttons">
+            <Helmet>
+                <meta name="description" content="Create arrow buttons with CSS" />
+                <meta name="keywords" content="css arrow buttons" />
+            </Helmet>
+            <div style={{ padding: '64px 32px' }}>
+                <BrowserFrame
+                    content={(
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                display: 'flex',
+                                height: '100%',
+                                justifyContent: 'center',
+                                padding: '8px',
+                            }}
+                        >
+                            <div
+                                style={{
+                                    height: '200px',
+                                    position: 'relative',
+                                    width: '200px',
+                                }}
+                            >
+                                <div
+                                    style={{
+                                        left: '50%',
+                                        position: 'absolute',
+                                        top: 0,
+                                        transform: 'translate(-50%, -50%)',
+                                    }}
+                                >
+                                    <button
+                                        style={{
+                                            alignItems: 'center',
+                                            backgroundColor: 'transparent',
+                                            border: '1px solid rgba(0, 0, 0, 0.3)',
+                                            display: 'flex',
+                                            justifyContent: 'center',
+                                            padding: '8px',
+                                        }}
+                                    >
+                                        <div
+                                            style={{
+                                                backgroundColor: 'transparent',
+                                                borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
+                                                borderTop: '1px solid rgba(0, 0, 0, 0.3)',
+                                                height: '12px',
+                                                transform: 'translateY(25%) rotate(45deg)',
+                                                width: '12px',
+                                            }}
+                                        />
+                                        <div style={{ marginLeft: '8px' }}>Up</div>
+                                    </button>
+                                </div>
+                                <div
+                                    style={{
+                                        position: 'absolute',
+                                        right: 0,
+                                        top: '50%',
+                                        transform: 'translate(50%, -50%)',
+                                    }}
+                                >
+                                    <button
+                                        style={{
+                                            alignItems: 'center',
+                                            backgroundColor: 'transparent',
+                                            border: '1px solid rgba(0, 0, 0, 0.3)',
+                                            display: 'flex',
+                                            justifyContent: 'center',
+                                            padding: '8px',
+                                        }}
+                                    >
+                                        <div style={{ marginRight: '8px' }}>Right</div>
+                                        <div
+                                            style={{
+                                                backgroundColor: 'transparent',
+                                                borderRight: '1px solid rgba(0, 0, 0, 0.3)',
+                                                borderTop: '1px solid rgba(0, 0, 0, 0.3)',
+                                                height: '12px',
+                                                transform: 'translateX(-25%) rotate(45deg)',
+                                                width: '12px',
+                                            }}
+                                        />
+                                    </button>
+                                </div>
+                                <div
+                                    style={{
+                                        bottom: 0,
+                                        left: '50%',
+                                        position: 'absolute',
+                                        transform: 'translate(-50%, 50%)',
+                                    }}
+                                >
+                                    <button
+                                        style={{
+                                            alignItems: 'center',
+                                            backgroundColor: 'transparent',
+                                            border: '1px solid rgba(0, 0, 0, 0.3)',
+                                            display: 'flex',
+                                            justifyContent: 'center',
+                                            padding: '8px',
+                                        }}
+                                    >
+                                        <div
+                                            style={{
+                                                backgroundColor: 'transparent',
+                                                borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
+                                                borderRight: '1px solid rgba(0, 0, 0, 0.3)',
+                                                height: '12px',
+                                                transform: 'translateY(-25%) rotate(45deg)',
+                                                width: '12px',
+                                            }}
+                                        />
+                                        <div style={{ marginLeft: '8px' }}>Down</div>
+                                    </button>
+                                </div>
+                                <div
+                                    style={{
+                                        left: 0,
+                                        position: 'absolute',
+                                        top: '50%',
+                                        transform: 'translate(-50%, -50%)',
+                                    }}
+                                >
+                                    <button
+                                        style={{
+                                            alignItems: 'center',
+                                            backgroundColor: 'transparent',
+                                            border: '1px solid rgba(0, 0, 0, 0.3)',
+                                            display: 'flex',
+                                            justifyContent: 'center',
+                                            padding: '8px',
+                                        }}
+                                    >
+                                        <div
+                                            style={{
+                                                backgroundColor: 'transparent',
+                                                borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
+                                                borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
+                                                height: '12px',
+                                                transform: 'translateX(25%) rotate(45deg)',
+                                                width: '12px',
+                                            }}
+                                        />
+                                        <div style={{ marginLeft: '8px' }}>Left</div>
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    )}
+                    source={`
+<!-- Left arrow button -->
+<button style="
+    /* Center the content */
+    align-items: center;
+    display: flex;
+    justify-content: center;
+
+    /* Spacing */
+    padding: 8px;
+">
+    <!-- Arrow -->
+    <div style="
+        /* Transparent background */
+        background-color: transparent;
+
+        /* Edges */
+        border-bottom: 1px solid rgba(0, 0, 0, 0.3);
+        border-left: 1px solid rgba(0, 0, 0, 0.3);
+        transform: translateX(25%) rotate(45deg);
+
+        /* Size */
+        height: 12px;
+        width: 12px;
+    "></div>
+
+    <!-- Content -->
+    ...
+</button>
+
+<!-- Up arrow button -->
+<button style="
+    /* Center the content */
+    align-items: center;
+    display: flex;
+    justify-content: center;
+
+    /* Spacing */
+    padding: 8px;
+">
+    <!-- Arrow -->
+    <div style="
+        /* Transparent background */
+        background-color: transparent;
+
+        /* Edges */
+        border-left: 1px solid rgba(0, 0, 0, 0.3);
+        border-top: 1px solid rgba(0, 0, 0, 0.3);
+        transform: translateY(25%) rotate(45deg);
+
+        /* Size */
+        height: 12px;
+        width: 12px;
+    "></div>
+
+    <!-- Content -->
+    ...
+</button>
+
+<!-- Right arrow button -->
+<button style="
+    /* Center the content */
+    align-items: center;
+    display: flex;
+    justify-content: center;
+
+    /* Spacing */
+    padding: 8px;
+">
+    <!-- Content -->
+    ...
+
+    <!-- Arrow -->
+    <div style="
+        /* Transparent background */
+        background-color: transparent;
+
+        /* Edges */
+        border-right: 1px solid rgba(0, 0, 0, 0.3);
+        border-top: 1px solid rgba(0, 0, 0, 0.3);
+        transform: translateX(-25%) rotate(45deg);
+
+        /* Size */
+        height: 12px;
+        width: 12px;
+    "></div>
+</button>
+
+<!-- Down arrow button -->
+<button style="
+    /* Center the content */
+    align-items: center;
+    display: flex;
+    justify-content: center;
+
+    /* Spacing */
+    padding: 8px;
+">
+    <!-- Arrow -->
+    <div style="
+        /* Transparent background */
+        background-color: transparent;
+
+        /* Edges */
+        border-bottom: 1px solid rgba(0, 0, 0, 0.3);
+        border-right: 1px solid rgba(0, 0, 0, 0.3);
+        transform: translateY(-25%) rotate(45deg);
+
+        /* Size */
+        height: 12px;
+        width: 12px;
+    "></div>
+
+    <!-- Content -->
+    ...
+</button>
+`}
+                />
+            </div>
+
+            <RelatedPatterns patterns={[Pattern.CloseButton, Pattern.PopoverArrow]} />
+        </DetailsLayout>
+    );
+};
+
+export default Details;
diff --git a/client/patterns/close-button/Details.tsx b/client/patterns/close-button/Details.tsx
index 52176c9..f460c97 100644
--- a/client/patterns/close-button/Details.tsx
+++ b/client/patterns/close-button/Details.tsx
@@ -116,7 +116,7 @@ const Details: React.FC<{}> = () => {
                 />
             </div>
 
-            <RelatedPatterns patterns={[Pattern.Chip, Pattern.Modal, Pattern.Notification]} />
+            <RelatedPatterns patterns={[Pattern.ArrowButtons, Pattern.Chip, Pattern.Modal, Pattern.Notification]} />
         </DetailsLayout>
     );
 };
diff --git a/client/patterns/popover-arrow/Details.tsx b/client/patterns/popover-arrow/Details.tsx
index 249ef95..5a1677f 100644
--- a/client/patterns/popover-arrow/Details.tsx
+++ b/client/patterns/popover-arrow/Details.tsx
@@ -434,7 +434,7 @@ const Details: React.FC<{}> = () => {
                 />
             </div>
 
-            <RelatedPatterns patterns={[Pattern.Tooltip]} />
+            <RelatedPatterns patterns={[Pattern.ArrowButtons, Pattern.Tooltip]} />
         </DetailsLayout>
     );
 };
diff --git a/public/sitemap.xml b/public/sitemap.xml
index 7fee9d4..5880451 100644
--- a/public/sitemap.xml
+++ b/public/sitemap.xml
@@ -1,6 +1,7 @@
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9">
     <url><loc>https://csslayout.io/patterns</loc></url>
     <url><loc>https://csslayout.io/patterns/accordion</loc></url>
+    <url><loc>https://csslayout.io/patterns/arrow-buttons</loc></url>
     <url><loc>https://csslayout.io/patterns/avatar</loc></url>
     <url><loc>https://csslayout.io/patterns/avatar-list</loc></url>
     <url><loc>https://csslayout.io/patterns/badge</loc></url>