diff --git a/client/constants/Pattern.ts b/client/constants/Pattern.ts
index dc0ce5a..24e1d8f 100644
--- a/client/constants/Pattern.ts
+++ b/client/constants/Pattern.ts
@@ -89,6 +89,7 @@ enum Pattern {
     Timeline = 'Timeline',
     TogglePasswordVisibility = 'Toggle password visibility',
     Tooltip = 'Tooltip',
+    TriangleButtons = 'Triangle buttons',
     UploadButton = 'Upload button',
     ValidationIcon = 'Validation icon',
     VideoBackground = 'Video background',
diff --git a/client/pages/ExplorePage.tsx b/client/pages/ExplorePage.tsx
index d2ffae3..40246b2 100644
--- a/client/pages/ExplorePage.tsx
+++ b/client/pages/ExplorePage.tsx
@@ -187,6 +187,7 @@ const ExplorePage = () => {
                         <CoverCard pattern={Pattern.StickyTableHeaders} />
                         <CoverCard pattern={Pattern.Teardrop} />
                         <CoverCard pattern={Pattern.Timeline} />
+                        <CoverCard pattern={Pattern.TriangleButtons} />
                         <CoverCard pattern={Pattern.VideoBackground} />
                         <CoverCard pattern={Pattern.Watermark} />
                     </div>
diff --git a/client/patterns/arrow-buttons/Details.tsx b/client/patterns/arrow-buttons/Details.tsx
index ccbcab9..aba2e7f 100644
--- a/client/patterns/arrow-buttons/Details.tsx
+++ b/client/patterns/arrow-buttons/Details.tsx
@@ -165,35 +165,6 @@ const Details: React.FC<{}> = () => {
                         </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 */
@@ -280,11 +251,40 @@ const Details: React.FC<{}> = () => {
     <!-- Content -->
     ...
 </button>
+
+<!-- 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>
 `}
                 />
             </div>
 
-            <RelatedPatterns patterns={[Pattern.CloseButton, Pattern.PopoverArrow]} />
+            <RelatedPatterns patterns={[Pattern.CloseButton, Pattern.PopoverArrow, Pattern.TriangleButtons]} />
         </DetailsLayout>
     );
 };
diff --git a/client/patterns/triangle-buttons/Cover.tsx b/client/patterns/triangle-buttons/Cover.tsx
new file mode 100644
index 0000000..3bd82c4
--- /dev/null
+++ b/client/patterns/triangle-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={{
+                            borderColor: 'transparent transparent rgba(0, 0, 0, 0.3) transparent',
+                            borderStyle: 'solid',
+                            borderWidth: '0px 8px 8px 8px',
+                            height: 0,
+                            left: '50%',
+                            position: 'absolute',
+                            top: 0,
+                            transform: 'translate(-50%, -50%)',
+                            width: 0,
+                        }}
+                    />
+                    <div
+                        style={{
+                            borderColor: 'transparent transparent transparent rgba(0, 0, 0, 0.3)',
+                            borderStyle: 'solid',
+                            borderWidth: '8px 0px 8px 8px',
+                            height: 0,
+                            position: 'absolute',
+                            right: 0,
+                            top: '50%',
+                            transform: 'translate(50%, -50%)',
+                            width: 0,
+                        }}
+                    />
+                    <div
+                        style={{
+                            borderColor: 'rgba(0, 0, 0, 0.3) transparent transparent transparent',
+                            borderStyle: 'solid',
+                            borderWidth: '8px 8px 0px 8px',
+                            bottom: '-8px',
+                            height: 0,
+                            left: '50%',
+                            position: 'absolute',
+                            transform: 'translate(-50%, -50%)',
+                            width: 0,
+                        }}
+                    />
+                    <div
+                        style={{
+                            borderColor: 'transparent rgba(0, 0, 0, 0.3) transparent transparent',
+                            borderStyle: 'solid',
+                            borderWidth: '8px 8px 8px 0px',
+                            height: 0,
+                            left: 0,
+                            position: 'absolute',
+                            top: '50%',
+                            transform: 'translate(-50%, -50%)',
+                            width: 0,
+                        }}
+                    />
+                </div>
+            </div>
+        </Frame>
+    );
+};
+
+export default Cover;
diff --git a/client/patterns/triangle-buttons/Details.tsx b/client/patterns/triangle-buttons/Details.tsx
new file mode 100644
index 0000000..fb5396a
--- /dev/null
+++ b/client/patterns/triangle-buttons/Details.tsx
@@ -0,0 +1,272 @@
+/**
+ * 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="Triangle buttons">
+            <Helmet>
+                <meta name="description" content="Create triangle buttons with CSS" />
+                <meta name="keywords" content="css triangle 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={{
+                                                borderColor: 'transparent transparent rgba(0, 0, 0, 0.3) transparent',
+                                                borderStyle: 'solid',
+                                                borderWidth: '0px 8px 8px 8px',
+                                                height: 0,
+                                                width: 0,
+                                            }}
+                                        />
+                                        <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={{
+                                                borderColor: 'transparent transparent transparent rgba(0, 0, 0, 0.3)',
+                                                borderStyle: 'solid',
+                                                borderWidth: '8px 0px 8px 8px',
+                                                height: 0,
+                                                width: 0,
+                                            }}
+                                        />
+                                    </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={{
+                                                borderColor: 'rgba(0, 0, 0, 0.3) transparent transparent transparent',
+                                                borderStyle: 'solid',
+                                                borderWidth: '8px 8px 0px 8px',
+                                                height: 0,
+                                                width: 0,
+                                            }}
+                                        />
+                                        <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={{
+                                                borderColor: 'transparent rgba(0, 0, 0, 0.3) transparent transparent',
+                                                borderStyle: 'solid',
+                                                borderWidth: '8px 8px 8px 0px',
+                                                height: 0,
+                                                width: 0,
+                                            }}
+                                        />
+                                        <div style={{ marginLeft: '8px' }}>Left</div>
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    )}
+                    source={`
+<!-- Up triangle button -->
+<button style="
+    /* Center the content */
+    align-items: center;
+    display: flex;
+    justify-content: center;
+
+    /* Spacing */
+    padding: 8px;
+">
+    <!-- Triangle -->
+    <div style="
+        border-color: transparent transparent rgba(0, 0, 0, 0.3);
+        border-style: solid;
+        border-width: 0px 8px 8px;
+
+        /* Size */
+        height: 0px;
+        width: 0px;
+    "></div>
+
+    <!-- Content -->
+    ...
+</button>
+
+<!-- Right triangle button -->
+<button style="
+    /* Center the content */
+    align-items: center;
+    display: flex;
+    justify-content: center;
+
+    /* Spacing */
+    padding: 8px;
+">
+    <!-- Content -->
+    ...
+
+    <!-- Triangle -->
+    <div style="
+        border-color: transparent transparent transparent rgba(0, 0, 0, 0.3);
+        border-style: solid;
+        border-width: 8px 0px 8px 8px;
+
+        /* Size */
+        height: 0px;
+        width: 0px;
+    "></div>
+</button>
+
+<!-- Down triangle button -->
+<button style="
+    /* Center the content */
+    align-items: center;
+    display: flex;
+    justify-content: center;
+
+    /* Spacing */
+    padding: 8px;
+">
+    <!-- Triangle -->
+    <div style="
+        border-color: rgba(0, 0, 0, 0.3) transparent transparent;
+        border-style: solid;
+        border-width: 8px 8px 0px;
+
+        /* Size */
+        height: 0px;
+        width: 0px;
+    "></div>
+
+    <!-- Content -->
+    ...
+</button>
+
+<!-- Left triangle button -->
+<button style="
+    /* Center the content */
+    align-items: center;
+    display: flex;
+    justify-content: center;
+
+    /* Spacing */
+    padding: 8px;
+">
+    <!-- Triangle -->
+    <div style="
+        border-color: transparent rgba(0, 0, 0, 0.3) transparent transparent;
+        border-style: solid;
+        border-width: 8px 8px 8px 0px;
+
+        /* Size */
+        height: 0px;
+        width: 0px;
+    "></div>
+
+    <!-- Content -->
+    ...
+</button>
+`}
+                />
+            </div>
+
+            <RelatedPatterns patterns={[Pattern.ArrowButtons]} />
+        </DetailsLayout>
+    );
+};
+
+export default Details;
diff --git a/public/sitemap.xml b/public/sitemap.xml
index 5880451..c224a19 100644
--- a/public/sitemap.xml
+++ b/public/sitemap.xml
@@ -85,6 +85,7 @@
     <url><loc>https://csslayout.io/patterns/timeline</loc></url>
     <url><loc>https://csslayout.io/patterns/toggle-password-visibility</loc></url>
     <url><loc>https://csslayout.io/patterns/tooltip</loc></url>
+    <url><loc>https://csslayout.io/patterns/triangle-buttons</loc></url>
     <url><loc>https://csslayout.io/patterns/upload-button</loc></url>
     <url><loc>https://csslayout.io/patterns/validation-icon</loc></url>
     <url><loc>https://csslayout.io/patterns/video-background</loc></url>