Patterns for Links & Buttons
- Desktop (48)
- Tablet (0)
- Mobile (3)
405. Ferrari Luce Website (by LoveFrom)
Desktop | Landing Page | Web | Navbar | Footer | Hypertext Links | Animation | Carrousel | Fixed on Scroll | Image / Illustration | Thumbnail | Button | Transition | Video | Anchor Scroll | Scrollbar
401. In-App News Notification
Desktop | Awareness | Notification Badge | Tooltip | Infinite Scroll | Hypertext Links
392. SaaS for Construction Workers
Desktop | Landing Page | Web | EspaƱol | Drag & Drop Gesture | Carrousel | Image / Illustration | Animation | Navbar | Hypertext Links | Fixed on Scroll
390. Icon Software Landing Page
Desktop | Landing Page | Decision Making | Web | English | Navbar | Footer | Hypertext Links
389. Text Edit Inline Input
Desktop | Accessibility | Decision Making | Web | English | Text Input | Hypertext Links | Modal
378. Modal Blackout w/ Animation
Desktop | Decision Making | Awareness | Onboarding | Web | EspaƱol | Modal | Hypertext Links | Animation
363. Better History - Back to Top on scroll
Desktop | Pathfinding | Awareness | Web | English | Pagination | Infinite Scroll | Hypertext Links | Fixed on Scroll
361. WhatsApp - Progress Bar Loading
Desktop | Awareness | Pathfinding | Onboarding | Web | EspaƱol | Loader | Hypertext Links
359. Discord - Button to Input Transition
Desktop | Decision Making | Pathfinding | Consent | Web | EspaƱol | Text Input | Hypertext Links
355. Jira - Feature Presentation Tooltip
Desktop | Awareness | Decision Making | Onboarding | Web | EspaƱol | Tooltip | Hypertext Links | Pagination
349. HubSpot - Toggle High Contrast
Desktop | Accessibility | Awareness | Web | English | Hypertext Links | Navbar
359. Toggle List/Grid View
Desktop | Accessibility | Onboarding | Pathfinding | Web | EspaƱol | Tooltip | Hypertext Links
343. Behance - Login with Code Validation
Desktop | Consent | Decision Making | Awareness | Web | EspaƱol | Text Input | Hypertext Links | Pagination
339. Asana - Platform Onboarding Simulator
Desktop | Decision Making | Awareness | Pathfinding | Web | English | Text Input | Pagination | Animation | Hypertext Links
345. Vertical Accordion for FAQs
Desktop | Pathfinding | Accessibility | Awareness | Web | EspaƱol | Accordion | Hypertext Links
336. Floating Popover on Click
Desktop | Pathfinding | Awareness | Apple OS | English | Tooltip | Text Input | Hypertext Links
319. Modal Blackout w/ Multiple Choice
Desktop | Decision Making | Consent | Awareness | Web | EspaƱol | Modal | Avatar | Button | Hypertext Links
315. Signal - PIN Reminder
Desktop | Awareness | Accessibility | Apple OS | English | Text Input | Modal | Banner | Hypertext Links
_00.42.51.png?table=block&id=0252c6ff-06c8-496f-88d6-e8f876a3af4d&cache=v2)
295. āNEWā Badge on Menu Items
Desktop | Mobile | Awareness | Decision Making | Pathfinding | Web | English | Navbar | Notification Badge | Hypertext Links | Notion
268. Drag & Drop to Upload File
Desktop | Awareness | Pathfinding | Web | Apple OS | English | Drag & Drop Gesture | Modal | Hypertext Links | Animation | Image / Illustration | GIPHY
259. Multi-depth Sidebar Navigation
Desktop | Pathfinding | Web | English | Side Panel | Hypertext Links | Animation | Squarespace
258. Squarespace - Adaptable Viewport Size
Desktop | Accessibility | Pathfinding | Web | English | Side Panel | Hypertext Links | Animation | Squarespace
235. Background Animation (on Mouse Hover)
Desktop | Decision Making | Awareness | Pathfinding | Web | EspaƱol | Animation | Hypertext Links | Disney
241. Modal Blackout w/ Steps
Desktop | Onboarding | Awareness | Web | English | Modal | Hypertext Links | Pagination | Image / Illustration | Wordpress
231. Floating Dialog Popover w/ Steps
Desktop | Awareness | Pathfinding | Web | EspaƱol | Hypertext Links | Pagination | Side Panel | Alert Dialog | Modal | Dark Mode | Wordpress
_15.12.59.png?table=block&id=9d78d4bd-0fab-4f57-9291-2d0e1b8e99a9&cache=v2)
229. Top Banner for Design Changes
Desktop | Awareness | Web | EspaƱol | Hypertext Links | Banner | Google | Google Meet
228. Notification Bell Status
Desktop | Accessibility | Web | English | Hypertext Links | Dropdown Menu | Empty State | User Selection | Avatar | Animation | YouTube | Google
212. Automatic Background Animation (on Load)
Desktop | Decision Making | Awareness | Web | English | Animation | Loader | Hypertext Links
203. Two-step Download Flow
Desktop | Onboarding | Decision Making | Landing Page | Web | English | Button | Fixed on Scroll | Hypertext Links | Steps | Google | Google Chrome
_11.28.04_a._m..png?table=block&id=9ed7b18a-e2c4-459c-89d2-022135be31eb&cache=v2)
207. Downloading Desktop App
Desktop | Awareness | Web | English | Hypertext Links
5. Website Promotional Top Banners
Desktop | Awareness | Web | English | Banner | Hypertext Links
190. Delete Confirmation w/ Name (moved)
Desktop | Awareness | Web | English | Text Input | Modal | Hypertext Links | Webflow
_12.03.02.png?table=block&id=308eebf9-c4aa-4879-a6b9-62970b2cc7d2&cache=v2)
199. Sidebar Emptystate
Desktop | Onboarding | Awareness | Web | English | Side Panel | Hypertext Links | Empty State | Image / Illustration | Google | Google Suite
201. Modal Blackout w/ Actions
Desktop | Decision Making | Apple OS | English | Modal | Hypertext Links | Apple | Apple iTunes
_10.03.52.png?table=block&id=ad3ab3c8-6c9a-4429-9994-30afeb682d3f&cache=v2)
189. Illustration (Meme) on Empty State
Desktop | Awareness | Web | English | Image / Illustration | Hypertext Links | Webflow
130. Animated Email Page
Desktop | Awareness | Decision Making | Email | English | Animation | Hypertext Links | Google | Gmail
132. Amazon - Store Tooltip Reminders
Desktop | Onboarding | Awareness | Web | EspaƱol | Tooltip | Hypertext Links | Amazon
164. Static Tooltip on Menu
Desktop | Awareness | Web | EspaƱol | Tooltip | Hypertext Links | Linkedin
_06.23.32_p._m..png?table=block&id=a5d3a106-65c7-460b-a778-61c304ae5652&cache=v2)
42. Browser Status Banner for Pages
Desktop | š± Mobile | Awareness | Apple OS | EspaƱol | Banner | Hypertext Links | Empty State | Error State | Apple Safari
139. Synced Hover Animations
Desktop | Decision Making | Awareness | Web | English | Hypertext Links | Graph | Mailchimp
_22.41.58.png?table=block&id=230850ed-d5a6-4973-aa55-1576bc51cd42&cache=v2)
145. Communication Preferences on Sign Up Flow
Desktop | Appreciation | Onboarding | ā¼ Consent | Web | English | Text Input | Hypertext Links | Pagination | Google | Google Suite
171. Slack - Multi-browser Sign In
Desktop | Onboarding | Pathfinding | Apple OS | Web | Email | English | Navbar | Text Input | Hypertext Links | Button | Numeric Input | Slack
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
_01.19.43_p._m..png?table=block&id=c7898805-9b99-476d-8915-f67780417122&cache=v2)
94. Top Primary Banner
Desktop | COVID-19 Edition | Web | EspaƱol | Hypertext Links | Banner
_12.48.42_p._m..png?table=block&id=b4906d6f-a1ce-4586-9895-0858a8b7f2cc&cache=v2)
105. Floating Tooltip Blackout
Desktop | Awareness | Web | English | Button | Dim Overlay | Tooltip | Alert Dialog | Close Overlay | Hypertext Links
166. Generated Effect: Confetti Explosion
Desktop | Appreciation | Decision Making | Web | English | Modal | Hypertext Links | Animation | Image / Illustration
188. Trello - Color shapes for Colour-blind
Desktop | Accessibility | Web | EspaƱol | Modal | Tooltip | Hypertext Links | Text Input | Trello
10. Dedicated Screen for Action Confirmation
Desktop | Decision Making | Awareness | Consent | Web | EspaƱol | English | Button | Hypertext Links | Invitation Link | Image / Illustration | Linkedin