CSS Library Links & Buttons
Welcome to Dynamic Drive's new CSS library! Here you'll find original, practical CSS codes and examples such as CSS menus to give your site a visual boast.
CSS Dual Color Pill Buttons
These pill shaped buttons comprise of two complimentary colors using one or two pseudo elements that come over when the mouse rolls over it.
Slide Out Social Icon Buttons
These space saving social buttons slide out into view one at a time when the user clicks on the main button. The social icons appear tucked away and invisible initially, by placing them inside the "back face" of a DIV and setting the DIV to "backface-visibility: hidden
".
CSS Button Style: Draped Background Effect
These CSS buttons are endowed with a solid background that "drapes" into view when the mouse rolls over them, creating a sleek, polished look.
Depressible Circle Buttons
These large, circular buttons employ CSS3 shadows to create a 3D, depressible effect, with hovering over a button causing it to depress. Four different button colors are presented to give you a jump start in inspiration for using these bold menu buttons. Go big -and round- or go home!
Flipboard CSS buttons
Flipboard creates a series of CSS buttons that flip horizontally on themselves when the mouse rolls over them, creating an elegant, eye catching effect. It employs CSS3 transform and transitions to do the heavy work.
3D Depressible Button
CSS can be used to really jazz up a plain looking link and create an awesome "call to action" button, as in the case of our 3D depressible button here.
Spinning icons using CSS3 transform
An effect that seems to be popping up with increased frequency is the spinning image, or more precisely, icons. Move the mouse over an icon, and it spins (rotates) on its axis to draw attention to itself. This is realized using CSS3's transform: rotate(xdeg)
property.