Skip to content

Learn Explore Roadmaps Paths Organizations Contact

Learn. Build. Grow.

Learn

Learn
Explore
Roadmaps
Paths
Methodology

For organizations

Schools & Business

Think Pixel

About
Contact
Privacy
Terms
Cookies

© 2026 Think Pixel

Progress0%

Menus

1How TO - Icon Bar
2How TO - Menu Icon
3How TO - Collapsibles/Accordion
4How TO - Tabs
5How TO - Vertical Tabs
6How TO - Tab Headers
7How TO - Full Page Tabs
8How TO - Hover Tabs
9How TO - Top Navigation
10How TO - Responsive Top Navigation
11How TO - Split Navigation
12How TO - Navbar with Icons
13How TO - Search Menu
14How TO - Search Bar
15How TO - Fixed Sidebar
16How TO - Side Navigation
17How TO - Responsive Sidebar
18How TO - Full screen Overlay Navigation
19How TO - Off-Canvas Menu
20How TO - Side Navigation Buttons
21How TO - Sidebar with Icons
22How TO - Horizontal Scroll Menu
23How TO - Vertical Menu
24How TO - Bottom Navigation
25How TO - Responsive Bottom Navigation
26How TO - Bottom Border Nav Links
27How TO - Right Aligned Menu Buttons
28How TO - Centered Top Navigation
29How TO - Equal Width Navbar Links
30How TO - Fixed Menu
31How TO - Slide Down a Bar on Scroll
32How TO - Hide Menu on Scroll
33How TO - Shrink Navigation Menu on Scroll
34How TO - Sticky/Affix Navbar
35How TO - Navbar on Image
36How TO - Hoverable Dropdown
37How TO - Clickable Dropdown
38How TO - Cascading Dropdown List
39How TO - Dropdown Navbar
40How TO - Dropdown Sidebar
41How TO - Responsive Navbar with Dropdown
42How TO - Subnav
43How TO - Dropup
44How TO - Mega Menu
45How TO - Mobile Navigation Menu
46How TO - Curtain Menu
47How TO - Collapse Sidebar
48How TO - Collapse Sidepanel
49How TO - CSS Pagination
50How TO - CSS Breadcrumbs
51How TO - Button Group
52How TO - Vertical Button Group
53How TO - Sticky Social Bar
54How TO - Pill Navigation
55How TO - Responsive Header

Images

56How TO - Slideshow
57How TO - Slideshow Gallery
58How TO - Modal Images
59How TO - Lightbox
60How TO - Responsive Image Grid
61How TO - Image Grid
62How TO - Responsive Image Gallery
63How TO - Horizontal Scrollable Image Gallery
64How TO - Tab Gallery
65How TO - Image Hover Overlay
66How TO - Image Overlay Slide
67How TO - Image Overlay Zoom
68How TO - Image Overlay Title
69How TO - Image Overlay Icon
70How TO - Add Image Effects
71How TO - Black and White Images
72How TO - Position Text Over an Image
73How TO - Text Blocks Over Image
74How TO - Image with Transparent Text
75How TO - Full Page Image
76How TO - Form on Image
77How TO - Hero Image
78How TO - Blurred Background Image
79How TO - Change Background on Scroll
80How TO - Align Images Side By Side
81How TO - Rounded Images
82How TO - Avatar Images
83How TO - Responsive Images
84How TO - Center Images
85How TO - Thumbnail
86How TO - Add a Border to an Image
87How TO - "Meet The Team" Page
88How TO - Sticky Image
89How TO - Flip an Image
90How TO - Shake an Image
91How TO - Portfolio Gallery
92How TO - Portfolio Gallery with Filtering
93How TO - Image Zoom
94How TO - Image Magnifier Glass
95How TO - Image Comparison Slider
96How TO - Add a Favicon in HTML

Buttons

97How TO - Alert Buttons
98How TO - Outline Buttons
99How TO - Split Buttons
100How TO - Animate Buttons
101How TO - Fading Buttons
102How TO - Button on Image
103How TO - Social Media Buttons
104How TO - Read More Read Less Button
105How TO - Loading Buttons
106How TO - Download Button
107How TO - Pill Buttons
108How TO - Notification Buttons
109How TO - Icon Buttons
110How TO - Next and Previous Buttons
111How TO - More Button in Navbar
112How TO - Full Width (Block) Buttons
113How TO - Text Buttons
114How TO - Round Buttons
115How TO - Scroll Back To Top Button

Forms

116How TO - Login Form
117How TO - Sign Up Form
118How TO - Checkout Form
119How TO - Contact Form
120How TO - Social Login Form
121How TO - Register Form
122How TO - Form with Icons
123How TO - Email Newsletter
124How TO - Stacked Form
125How TO - Responsive Form
126How TO - Popup Form
127How TO - Inline Form
128How TO - Clear Input Field
129How TO - Hide Arrows From Input Number
130How TO - Copy Text to Clipboard
131How TO - Animated Search Form
132How TO - Search Button
133How TO - Fullscreen Search
134How TO - Input Field in a Menu
135How TO - Login Form in a Menu
136How TO - Custom Checkbox
137How TO - Custom Select Box
138How TO - Toggle Switch
139How TO - Display Text when Checkbox is Checked
140How TO - Detect Caps Lock
141How TO - Trigger Button Click on Enter
142How TO - Password Validation
143How TO - Toggle Password Visibility
144How TO - Form with Multiple Steps
145How TO - Autocomplete
146How TO - Turn Off Autocomplete For Input
147How TO - Disable Spellcheck for Forms
148How TO - File Upload Button
149How TO - JS Validation For Empty Fields

Filters

150How TO - Filter/Search List
151How TO - Filter/Search Table
152How TO - Filter Elements
153How TO - Search/Filter Dropdown
154How TO - Sort a List
155How TO - Sort a Table

Tables

156How TO - Zebra Striped Table
157How TO - Center Tables
158How TO - Full-width Table
159How TO - Nested Table
160How TO - Side-by-side Tables
161How TO - Responsive Tables
162How TO - Comparison Table

More

163How TO - Fullscreen Video
164How TO - CSS/JS Modal
165How TO - Delete Modal
166How TO - Timeline
167How TO - Scroll Indicator
168How TO - JavaScript Progress Bar
169How TO - CSS Skill Bar
170How TO - Range Sliders
171How TO - Color Picker
172How TO - Email Field
173How TO - Tooltip
174How TO - Display an Element on Hover
175How TO - Popup
176How TO - Collapse
177How TO - CSS Calendar
178How TO - Include HTML
179How TO - Create a To Do List
180How TO - CSS Loader
181How TO - Badges
182How TO - Star Rating
183How TO - User Rating
184How TO - Overlay
185How TO - Contact Chips
186How TO - Cards
187How TO - Flip Card
188How TO - Profile Card
189How TO - Product Card
190How TO - Alerts
191How TO - Callout Message
192How TO - Notes
193How TO - Labels
194How TO - CSS Ribbon
195How TO - CSS Tag Cloud
196How TO - Circles
197How TO - Style HR (Horizontal Ruler/Line)
198How TO - Coupon
199How TO - List Group
200How TO - List Group with Badges
201How TO - List Without Bullets
202How TO - Responsive Text
203How TO - Cutout Text
204How TO - Glowing Text
205How TO - Fixed Footer
206How TO - Sticky Element
207How TO - Equal Height
208How TO - Clear Floats (Clearfix)
209How TO - Responsive Floats
210How TO - Snackbar / Toast
211How TO - Fullscreen
212How TO - Scroll Drawing
213How TO - Smooth Scroll
214How TO - Background Gradient on Scroll
215How TO - On Scroll Header
216How TO - Resize Header on Scroll
217How TO - Responsive Pricing Table
218How TO - Parallax Scrolling
219How TO - Aspect Ratio
220How TO - Responsive Iframe
221How TO - Toggle Like and Dislike
222How TO - Toggle Hide and Show
223How TO - Toggle Dark Mode
224How TO - Toggle/Swap Text
225How TO - Toggle Class
226How TO - Add a Class
227How TO - Remove a Class
228How TO - Change a Class
229How TO - Add Active Class to Current Element
230How TO - Tree View
231How TO - Remove Decimals of a Number
232How TO - Remove a Property from an Object
233How TO - Online Offline Detection
234How TO - Check if an Element is Hidden
235How TO - Redirect to Another Webpage
236How TO - Format a Number with Two Decimals
237How TO - Zoom on Hover
238How TO - 3D Flip Box
239How TO - Center Elements Vertically
240How TO - Center a Button in DIV
241How TO - Center a List
242How TO - Transition on Hover
243How TO - CSS Arrows
244How TO - CSS Shapes
245How TO - Download Link
246How TO - Full Height Element
247How TO - Browser Window CSS
248How TO - Custom Scrollbar
249How TO - Hide Scrollbar
250How TO - Always Show Scrollbars
251How TO - Device Look
252How TO - Remove Contenteditable Border
253How TO - Change Placeholder Color
254How TO - Disable Resizing of Textarea
255How TO - Disable Text Selection
256How TO - Change Text Selection Color
257How TO - Change Bullet Color of Lists
258How TO - Vertical Line
259How TO - Divider
260How TO - Text Divider
261How TO - Animate Icons
262How TO - JavaScript Countdown Timer
263How TO - Typing Effect
264How TO - Coming Soon Page
265How TO - Chat
266How TO - Popup Chat Window
267How TO - Split Screen 1/2
268How TO - Testimonials
269How TO - Section Counter
270How TO - Quotes Slideshow
271How TO - Closable List Items
272How TO - Typical Device Breakpoints
273How TO - Create a Draggable HTML Element
274How TO - Media Queries with JavaScript
275How TO - Create a Syntax Highlighter
276How TO - JavaScript HTML Animations
277How TO - Get The Length of a String
278How TO - JavaScript Exponentiation (**)
279How TO - Set Default Parameters
280How TO - Random Number Between Two Numbers
281How TO - Sort Numeric Array
282How TO - The Spread Operator (...)
283How TO - Scroll Into View
284How TO - Get Current Date With JavaScript
285How TO - Get Current URL With JavaScript
286How TO - Get The Current Screen Size
287How TO - Get Iframe Elements

Website

288How TO - Make a Website
289How TO - Build a Website
290How TO - Make a Website with Bootstrap
291How TO - Make a Website with Bootstrap 4
292How TO - Make a Website with Bootstrap 5
293How TO - Create and View a Website
294How to make a link tree website
295How To Make a Restaurant website
296How TO - Make an HTML Book
297How TO - Center Website
298How TO - Contact Section
299How TO - About Page
300How TO - Style a Header
301How TO - Example Website

Grid

302How TO - Two Column Layout
303How TO - Three Column Layout
304How TO - Four Column Layout
305How TO - Expanding Grid
306How TO - List Grid View
307How TO - Mixed Column Layout
308How TO - Column Cards
309How TO - Responsive Zig Zag Layout
310How TO - Blog Layout

Google

311How TO - Google Charts
312How TO - Google Fonts
313How TO - Google Font Pairings
314How to Set Up Google Analytics

Converters

315How TO - Weight Converter
316How TO - Temperature Converter
317How TO - Length Converter
318How TO - Speed Converter

Blog

319How TO - Get a Developer Job
320How TO - Become a Front-End Developer
321How TO - Hire Developers

Learn

How-To Guides

How TO - Animate Buttons

How-To GuidesLesson 100 of 321

How TO - Animate Buttons

Learn how to animate buttons using CSS.

0%

Learn how to animate buttons using CSS.

Animated Buttons

Example

Add a "pressed" effect on click:

Example

Add an arrow on hover:

Example

Add a "ripple" effect on click:

Go to the CSS Buttons Tutorial to learn more about how to style buttons.

PreviousHow TO - Split Buttons NextHow TO - Fading Buttons

More in Buttons

How TO - Alert Buttons
How TO - Outline Buttons
How TO - Split Buttons

On this page

Animated Buttons