Home
PATTTTERNS - An open catalog of design patterns | Product Hunt

Made with šŸ’™ by Pablo Armenv2.1.10

Home
/Components
/Links & Buttons

Patterns for Links & Buttons

Primary and secondary action triggers designed for clear affordance and high conversion.
Ā 
Recommendation (Ad)
https://uink.digital
Ā 
  • Desktop (44)
  • Tablet (0)
  • Mobile (3)
401. In-App News Notification

401. In-App News Notification

Desktop, Awareness, Notification Badge, Tooltip, Infinite Scroll, Hypertext Links

Open pattern
392. SaaS for Construction Workers

392. SaaS for Construction Workers

Desktop, Landing Page, Web, EspaƱol, Drag & Drop Gesture, Carrousel, Image / Illustration, Animation, Navbar, Hypertext Links, Fixed on Scroll

Open pattern
390. Icon Software Landing Page

390. Icon Software Landing Page

Desktop, Landing Page, Decision Making, Web, English, Navbar, Footer, Hypertext Links

Open pattern
389. Text Edit Inline Input

389. Text Edit Inline Input

Desktop, Accessibility, Decision Making, Web, English, Text Input, Hypertext Links, Modal

Open pattern
378. Modal Blackout with Animation

378. Modal Blackout with Animation

Desktop, Decision Making, Awareness, Onboarding, Web, EspaƱol, Modal, Hypertext Links, Animation

Open pattern
363. Better History - Back to Top on scroll

363. Better History - Back to Top on scroll

Desktop, Pathfinding, Awareness, Web, English, Pagination, Infinite Scroll, Hypertext Links, Fixed on Scroll

Open pattern
361. WhatsApp - Progress Bar Loading

361. WhatsApp - Progress Bar Loading

Desktop, Awareness, Pathfinding, Onboarding, Web, EspaƱol, Loader, Hypertext Links

Open pattern
359. Discord - Button to Input Transition

359. Discord - Button to Input Transition

Desktop, Decision Making, Pathfinding, Consent, Web, EspaƱol, Text Input, Hypertext Links

Open pattern
No preview

355. Jira - Feature Presentation Tooltip

Desktop, Awareness, Decision Making, Onboarding, Web, EspaƱol, Tooltip, Hypertext Links, Pagination

Open pattern
349. HubSpot - Toggle High Contrast

349. HubSpot - Toggle High Contrast

Desktop, Accessibility, Awareness, Web, English, Hypertext Links, Navbar

Open pattern
359. Toggle List/Grid View

359. Toggle List/Grid View

Desktop, Accessibility, Onboarding, Pathfinding, Web, EspaƱol, Tooltip, Hypertext Links

Open pattern
343. Behance - Login with Code Validation

343. Behance - Login with Code Validation

Desktop, Consent, Decision Making, Awareness, Web, EspaƱol, Text Input, Hypertext Links, Pagination

Open pattern
339. Asana - Platform Onboarding Simulator

339. Asana - Platform Onboarding Simulator

Desktop, Decision Making, Awareness, Pathfinding, Web, English, Text Input, Pagination, Animation, Hypertext Links

Open pattern
345. Vertical Accordion for FAQs

345. Vertical Accordion for FAQs

Desktop, Pathfinding, Accessibility, Awareness, Web, EspaƱol, Accordion, Hypertext Links

Open pattern
No preview

336. Floating Popover on Click

Desktop, Pathfinding, Awareness, Apple OS, English, Tooltip, Text Input, Hypertext Links

Open pattern
319. Wordpress - Delete Confirmation with Name

319. Wordpress - Delete Confirmation with Name

Desktop, Decision Making, Consent, Awareness, Web, EspaƱol, Modal, Avatar, Button, Hypertext Links

Open pattern
315. Signal - PIN Reminder

315. Signal - PIN Reminder

Desktop, Awareness, Accessibility, Apple OS, English, Text Input, Modal, Banner, Hypertext Links

Open pattern
295. ā€œNEWā€ Badge on Menu Items

295. ā€œNEWā€ Badge on Menu Items

Desktop, Mobile, Awareness, Decision Making, Pathfinding, Web, English, Navbar, Notification Badge, Hypertext Links, Notion

Open pattern
268. GIPHY - Alert on Drag & Drop

268. GIPHY - Alert on Drag & Drop

Desktop, Awareness, Pathfinding, Web, Apple OS, English, Drag & Drop Gesture, Modal, Hypertext Links, Animation, Image / Illustration, GIPHY

Open pattern
259. Squarespace - Multi-depth Sidebar Navigation

259. Squarespace - Multi-depth Sidebar Navigation

Desktop, Pathfinding, Web, English, Side Panel, Hypertext Links, Animation, Squarespace

Open pattern
258. Squarespace - Adaptable Viewport Size

258. Squarespace - Adaptable Viewport Size

Desktop, Accessibility, Pathfinding, Web, English, Side Panel, Hypertext Links, Animation, Squarespace

Open pattern
235. Background Animation on Hover

235. Background Animation on Hover

Desktop, Decision Making, Awareness, Pathfinding, Web, EspaƱol, Animation, Hypertext Links, Disney

Open pattern
241. Modal Blackout with Steps

241. Modal Blackout with Steps

Desktop, Onboarding, Awareness, Web, English, Modal, Hypertext Links, Pagination, Image / Illustration, Wordpress

Open pattern
231. Automatic Floating Popover with Steps

231. Automatic Floating Popover with Steps

Desktop, Awareness, Pathfinding, Web, EspaƱol, Hypertext Links, Pagination, Side Panel, Wordpress

Open pattern
229. Top Banner for Design Changes

229. Top Banner for Design Changes

Desktop, Awareness, Web, EspaƱol, Hypertext Links, Banner, Google, Google Meet

Open pattern
228. Notification Bell Status

228. Notification Bell Status

Desktop, Accessibility, Web, English, Hypertext Links, Dropdown Menu, Empty State, User Selection, Avatar, Animation, YouTube, Google

Open pattern
212. Automatic Background Animation

212. Automatic Background Animation

Desktop, Decision Making, Awareness, Web, English, Animation, Loader, Hypertext Links

Open pattern
101. Downloading Desktop App

101. Downloading Desktop App

Desktop, Awareness, Web, English, Hypertext Links

Open pattern
5. Website Promotional Top Banners

5. Website Promotional Top Banners

Desktop, Awareness, Web, English, Banner, Hypertext Links

Open pattern
95. Delete Confirmation with Name

95. Delete Confirmation with Name

Desktop, Awareness, Web, English, Text Input, Modal, Hypertext Links, Webflow

Open pattern
199. Sidebar Emptystate

199. Sidebar Emptystate

Desktop, Onboarding, Awareness, Web, English, Side Panel, Hypertext Links, Empty State, Google, Google Suite

Open pattern
201. Modal Blackout with Actions

201. Modal Blackout with Actions

Desktop, Decision Making, Apple OS, English, Modal, Hypertext Links, Apple, Apple iTunes

Open pattern
189. Illustration (Meme) on Empty State

189. Illustration (Meme) on Empty State

Desktop, Awareness, Web, English, Image / Illustration, Hypertext Links, Webflow

Open pattern
130. Animated Email Page

130. Animated Email Page

Desktop, Awareness, Decision Making, Email, English, Animation, Hypertext Links, Google, Gmail

Open pattern
No preview

132. Amazon - Store Tooltip Reminders

Desktop, Onboarding, Awareness, Web, EspaƱol, Tooltip, Hypertext Links, Amazon

Open pattern
No preview

164. Static Tooltip on Menu

Desktop, Awareness, Web, EspaƱol, Tooltip, Hypertext Links, Linkedin

Open pattern
42. Browser Status Banner for Pages

42. Browser Status Banner for Pages

Desktop, šŸ“± Mobile, Awareness, Apple OS, EspaƱol, Banner, Hypertext Links, Empty State, Error State, Apple Safari

Open pattern
139. Synced Hover Animations

139. Synced Hover Animations

Desktop, Decision Making, Awareness, Web, English, Hypertext Links, Graph, Mailchimp

Open pattern
145. Communication Preferences on Sign Up Flow

145. Communication Preferences on Sign Up Flow

Desktop, Appreciation, Onboarding, ā–¼ Consent, Web, English, Text Input, Hypertext Links, Pagination, Google, Google Suite

Open pattern
171. Slack - Multi-browser Sign In

171. Slack - Multi-browser Sign In

Desktop, Onboarding, Pathfinding, Apple OS, Web, Email, English, Navbar, Text Input, Hypertext Links, Button, Numeric Input, Slack

Open pattern
173. Share Invitation to Live Movie

173. Share Invitation to Live Movie

Desktop, Pathfinding, Onboarding, Awareness, Web, Apple OS, EspaƱol, Hypertext Links, Navbar, Live State, Empty State, Copy to Clipboard, Avatar, Thumbnail, Invitation Link, Disney

Open pattern
94. Top Primary Banner

94. Top Primary Banner

Desktop, COVID-19 Edition, Web, EspaƱol, Hypertext Links, Banner

Open pattern
166. Confetti Explosion

166. Confetti Explosion

Desktop, Appreciation, Decision Making, Web, English, Modal, Hypertext Links, Animation, Image / Illustration

Open pattern
188. Trello - Color shapes for Colour-blind

188. Trello - Color shapes for Colour-blind

Desktop, Accessibility, Web, EspaƱol, Modal, Tooltip, Hypertext Links, Text Input, Trello

Open pattern
Ā