The Speed Coding

CSS Tutorial

CSS Introduction CSS Syntax CSS Selectors CSS How To CSS Comments CSS Colors CSS Backgrounds CSS Borders CSS Margins CSS Padding CSS Height/Width CSS Box Model CSS Outline CSS Text CSS Fonts CSS Icons CSS Links CSS Lists CSS Tables CSS Display CSS Max-width CSS Position CSS Overflow CSS Float CSS Inline-block CSS Align CSS Combinators CSS Pseudo-class CSS Pseudo-element CSS Opacity CSS Navigation Bar CSS Dropdowns CSS Image Gallery CSS Image Sprites CSS Attr Selectors CSS Forms CSS Counters CSS Website Layout CSS Units CSS Specificity

CSS Advanced

CSS Rounded Corners CSS Border Images CSS Backgrounds CSS Colors CSS Gradients CSS Shadows CSS Text Effects CSS Web Fonts CSS 2D Transforms CSS 3D Transforms CSS Transitions CSS Animations CSS Tooltips CSS Style Images CSS object-fit CSS Buttons CSS Pagination CSS Multiple Columns CSS User Interface CSS Variables CSS Box Sizing CSS Flexbox CSS Media Queries CSS MQ Examples

CSS Responsive

RWD Intro RWD Viewport RWD Grid View RWD Media Queries RWD Images RWD Videos RWD Frameworks RWD Templates

CSS Grid

Grid Intro Grid Container Grid Item

CSS References

CSS Reference CSS Selectors CSS Functions CSS Reference Aural CSS Web Safe Fonts CSS Animatable CSS Units CSS PX-EM Converter CSS Colors CSS Color Values CSS Default Values CSS Browser Support

CSS Buttons


Learn how to style buttons using CSS.


Basic Button Styling

Example

.button {
  background-color: #4CAF50; /* Green */
  border: none;
  color : white;
  padding: 15px 32px;
  text-align: center;
  text-decoration : none;
  display: inline-block;
  font-size: 16px;
}

Button Colors

Use the background-color property to change the background color of a button:

Example

.button1 {background-color: #4CAF50; } /* Green */
.button2 {background-color: #008CBA; } /* Blue */
.button3 {background-color: #f44336 ; } /* Red */
.button4 {background-color: #e7e7e7; color: black; } /* Gray */
.button5 {background-color: #555555; } /* Black */

Button Sizes

Use the font-size property to change the font size of a button:

Example

.button1 {font-size: 10px; }
.button2 {font-size: 12px; }
.button3 {font-size: 16px; }
.button4 {font-size: 20px; }
.button5 {font-size: 24px; }

Use the padding property to change the padding of a button:

Example

.button1 {padding: 10px 24px ; }
.button2 {padding: 12px 28px; }
.button3 {padding: 14px 40px; }
.button4 {padding: 32px 16px; }
.button5 {padding: 16px; }

Rounded Buttons

Use the border-radius property to add rounded corners to a button:

Example

.button1 {border-radius: 2px; }
.button2 {border-radius: 4px; }
.button3 {border-radius: 8px; }
.button4 {border-radius: 12px; }
.button5 {border-radius: 50%; }

Colored Button Borders

Use the border property to add a colored border to a button:

Example

.button1 {
  background-color: white;
  color: black;
  border : 2px solid #4CAF50; /* Green */
}
...

Hoverable Buttons



Use the :hover selector to change the style of a button when you move the mouse over it.

Tip: Use the transition-duration property to determine the speed of the "hover " effect:

Example

.button {
  transition-duration: 0.4s;
}

.button:hover {
  background-color: #4CAF50; /* Green */
  color : white;
}
...

Shadow Buttons

Use the box-shadow property to add shadows to a button:

Example

.button1 {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19) ;
}

.button2:hover {
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}

Disabled Buttons

Use the opacity property to add transparency to a button (creates a "disabled " look).

Tip: You can also add the cursor property with a value of "not-allowed ", which will display a "no parking sign " when you mouse over the button:

Example

.disabled {
  opacity: 0.6;
  cursor: not-allowed ;
}

Button Width


By default, the size of the button is determined by its text content (as wide as its content). Use the width property to change the width of a button:

Example

.button1 {width: 250px; }
.button2 {width: 50%; }
.button3 {width: 100% ; }

Button Groups


Remove margins and add float:left to each button to create a button group:

Example

.button {
  float: left;
}

Bordered Button Group


Use the border property to create a bordered button group:

Example

.button {
  float: left;
  border: 1px solid green ;
}

Vertical Button Group


Use display:block instead of float:left to group the buttons below each other, instead of side by side:

Example

.button {
  display: block;
}

Button on Image

Snow

Animated Buttons

Example

Add an arrow on hover:

Example

Add a "pressed " effect on click:

Example

Fade in on hover:

Example

Add a "ripple " effect on click: