Welcome to our updated collection of CSS footers for August 2023. This collection includes 5 new items, hand-picked from various resources such as CodePen, GitHub, and other online platforms. These examples are free to use and can be easily integrated into your web pages to give them a unique and stylish look.
Footers are an integral part of a website's design and functionality. They typically contain contact information, links to privacy policies or terms of service, social media links, and sometimes a short about section. A well-designed footer can enhance the user experience, providing useful information and additional navigation options.
Our collection of CSS footers is diverse and versatile. It includes various styles and designs that can cater to different website themes and user preferences. Whether you're looking for a minimalist design or something more elaborate, you're likely to find something that suits your needs in our collection.
In conclusion, our collection of CSS footers is a valuable resource for web developers looking to enhance the aesthetics and usability of their websites. Feel free to explore the collection and use these examples in your projects.
Related Articles
Links
Made with
- HTML / CSS
About a code
Expanding Footer
An expanding footer on hover. Best viewed in windows wider than 500px and taller than 600px.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Footer
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Footer Design
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: bootstrap.css, font-awesome.css
Links
Made with
- HTML (Pug) / CSS (SCSS)
About a code
CSS Goey Footer
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Footer Always at the Bottom - Flexbox
When a web page doesn't have enough content to fit the screen, the footer doesn't stay at the bottom so it ends up looking weird. Solution: Do the layout using flex columns. In addtion to that either, add flex-grow: 1 to the content area, here it is the section. Or add margin-top: auto to the element you you wish for it to always stay at the bottom, here it is footer.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML (Pug) / CSS (SCSS) / JavaScript (Babel)
About the code
Animated Footer Toggle
Expand/collapse footer with animations.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: font-awesome.css
Links
Made with
- HTML / CSS
About the code
Footer with CSS Grid
Evenly space links with CSS Grid. No margin or padding needed!
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML (Pug) / CSS (SCSS)
About the code
Flexbox Sticky Footer
A simple example of using flexbox to create a sticky footer page layout.
Parallax Footer
Website fixed footer with HTML, CSS and JavaScript.
Made by Austin Paquette
January 7, 2017
Footer With Content Scale
HTML, CSS and JavaScript footer with content scale.
Made by Mātthīas
December 3, 2016
Social Media Footer
Just a hover effect for the social media links in the footer of a page.
Made by Andrew Canham
September 22, 2016
Links
Made with
- HTML
- CSS/SCSS
- JavaScript (jQuery.js)
About the code
Animated Mobile Footer Menu
Animated mobile footer menu to display 2-3 main actions a user can take on a mobile device. Shows up at 767px (for bootstrap users).
Simple Fixed Footer
HTML and CSS simple fixed footer.
Made by Mātthīas
August 25, 2015
Simple Slide-Out Footer
HTML and CSS simple slide-out footer.
Made by Riley Shaw
August 24, 2014
HTML And CSS Fixed Footer
A quick example of a fixed footer.
Made by Mads Håkansson
May 4, 2014
Pure CSS Classy Footer
Pure CSS transitioned footer. Keeps away from content, shows itself when it needs to be seen.
Made by Nick Braver
January 21, 2014
Beautiful Aurora Footer Lights
Beautiful Aurora lights display for footer.
Made by Amit Ashok Kamble
October 28, 2013