150+ CSS Buttons - Free Code + Demos

Recreating the (amazing!) buttons featured on Valorant from scratch based on their visual appearance. Rules: No Dev Tools / Source! Only colors may be pulled.

Chat bubble to close animation

Graph Button - Only CSS

Showing icons on mouseover in a button uing pure CSS

Created for the January 2020 Multi-buttons CodePen Challenge

My first CodePen challenge! For this challenge I decided to give myself the obstacle of not relying on icons, yet somehow communicate the action that takes place within each button through its hover/focus states.

Here are some neon pillboxes for Codepen's multi-buttons challenge!

A remake of Upload button interaction from dribbble by Shivam Kaushik. A no JS upload animation/microinteraction.

Video button animation

336 pixel perfect, all-purpose vector icons in a web-font kit

Very usually

Using pseudo elements as old style 3d color offsets. Transitioning to a simple css 3d button.

Social Animation

A playful set of buttons that utilize CSS gradients for fun colors and animations.

Creative Button Animation Effects | Only Using HTML & CSS

Thought I'd have a go at creating directionally aware buttons that fill based on how a child is hovered. Enjoy!

Button with animated border on hover

Outline button (or Ghost button): When hovered, the icon hidden at the left side will show. There are small, and large size for this. Used Font Awesome for the icon font. Some others may be used, I think. Style can be easily customized.

A simple file upload interaction design.

A CSS only implementation of glass-like neon glow buttons with text gradients & box-shadows.

This pen demonstrates the ability to use a multi-color box shadow using pseudo elements and a blur filter. Inspired by Razor's chroma colors.

With hover animation to fill the border gaps.

No comment lol.

Pure CSS button with fluid background

blow button on hover

it's just a button though. disclaimer: works in chrome. not sure about other browsers

Another set of buttons.

in this HTML CSS only code, I created two buttons Add, and remove buttons with simple css animation to switch from icon to text.

Made this forever ago for a client website.

made with css only :-)

Pure CSS (SCSS) stretchy button hover effect.

Burn!

Directionally aware hover button with just css using segments and hover state checks

Fancy Hover Animation

Simple play button SVG animation, still need to get it working on all browsers

The third installment to my famous Button Love series. Just hover your mouse to discover these beautifully themed buttons in action. Pure CSS(SCSS); absolutely no javascript.

Animate an arrow button on click. Change click event by mouseover to apply effect onOver.

Directionally aware hover button with just css using segments and hover state checks

Simple but cool transition - animation effect occurs on HTML button when mouse cursor comes over the button. All the transitions takes place based on CSS only.

Only SCSS / CSS.

Pure CSS button

Simple animation if you add smth to a collection for example Dribbble Shot

This pen is for outrageously useless buttons. Or are they? If the project is right, I suppose.

This is a flatt button, which has a 3-dimensional flipping effect on hover

Inspired by: https://dribbble.com/shots/3975065-With-a-Click-of-a-Button By Gal Shir Made the bubbles using "radial-gradient" for background-image. I believe this property is so cool that you can draw many things without adding extra divs or pseudo elements (::before and ::after)

Just playing around with CSS custom properties.

a playful springy download button w/ light jquery and css animation

Group button with svg icons, based on dribble project: https://dribbble.com/shots/694671-Buttons-Free-PSD

Material Design Flat UI CSS Mail Button. Pure CSS Animation

cool floating button animation using html and css and jquery

Made this sprite animation on button with hover effect for triggering the frame's , inspired by this codrop article https://tympanus.net/codrops/2016/09/29/transition-effect-with-css-masks/

Simple button hover effect by replacing the text in a button with an svg element which mimics the button in order to create an effect which can not (easily?) be done with css.

A mixin from my other pen, CSS border transitions. See also another effect drawing each border individually. Check out my button collection for more.

A few cool social buttons with smooth animations. Inspired by https://dribbble.com/shots/1674790-Infinity-Icon-iOS-7

An awesome simple CSS3 3D button.

A button with animating fly out dots that move along an offset path (formerly known as CSS motion paths)

Simple animated button with double border in pseudo element

Another quick pen of button animation based on a Dribbble post I liked by Daniel Jecha - https://dribbble.com/shots/2741994-Button-Experiment

Another set of social buttons for anyone to use/take inspiration from. This set takes advantage of Font Awesome icon pack.

Contact button from dribbble shot. Only for fun. Inspiration: https://dribbble.com/shots/2131627-Personal-Portfolio-Site/attachments/388736

A collection of various types of CSS buttons in various colors.

hover effect - animation icons

A set of button hover animations.

Originally I found this button on this site - https://isl.co/ and recreated it. Their version is broken in FF (already contacted them), because svg filter is imported as external file (I'm like 90% sure). This is a problem with FF, if svg, which containes filter, don't actually on the page...

Read More

Simple multi layer box shadow hover effect.

I've been wanting to make this button for a long time, and finally got around to it. Inspired by this site http://www.amy-movie.com/ here is my take on the main button style.

YouTube has a new player design, I managed to replicate the play / pause button with SVGs only. Many thanks to Mike Harris and his SVG Toggle Animation Pen!

I really liked the buttons on this behance post, so I wanted to try and make some for my site. They are wicked cool. https://www.behance.net/gallery/27689051/Paktor-App

A few examples of flashy hover effects. Currently updating this pen. Work in Progress

Snazzy CSS hover states for a button.

Experimental css buttons by Designify.me

HTML/CSS box and button hovers.

The Twitter [Like button] made only using SVG and CSS3 animations.

Just another experiment for a favourite button this time. Some nice animations etc. All in CSS, no imagery or svg's etc

Here I have created a simple like button based on the hover intent of the user. As this pen stands I'm not knowledgable enough to be able to store the likes server side, however the basic idea is here.

Experimenting with CSS button that gives the effect of a growing line slicing the button text on hover. The button is dependant on set heights of the text spans.

Create a very simple & minimal Ghost Button with CSS against a full scale background image. We will also add simple hover effects to make our Ghost button give visual feedback to user.

UPDATED May 2019, new version at https://codepen.io/renevanderlende/pen/JqPPVB?editors=1100 Answering a stackoverflow question I created a nice animated, multiring donut button SO http://stackoverflow.com/questions/33516444/css-transition-on-transparent-images Both shaded and unshaded ve...

Read More