Web Design Resources: CSS Tutorials, Buttons, Code Snippets

By March 7, 2015Tutorials

Modern trends of web design now highly creative with some exciting written code.

There are some availability of tutorials, ready-made code snippets and numbers of examples to execute a designer’s transparency. We present some best examples for you today.

Stylish CSS Switch Buttons

Here you can experience some stylish CSS only switch buttons which made based on (Adobe Illustrator tutorial), of course it’s a simplified version.

CSS Tutorials

CSS3 Buttons with Icons

Simple CSS3 buttons in variation of colors with beautiful icons. These icons are made using CSS3 techniques to create appropriate shapes. The body of the button consists of two divs (one for container and other for the main body itself) which animates nicely on hover with the use of CSS3 transition (will not work in Internet Explorer) property.

CSS Tutorials

Simple Buttons with Arrows

Here you can learn how to create simple buttons with arrows.

CSS Tutorials

CSS Buttons with Pseudo-elements

In this tutorial you can see what can do CSS. Create buttons using just one anchor tag per button.

CSS Tutorials

Gentle Colored Standard Buttons

Sometime you need a standard button with gentle color. This tutorial will help you for this type of buttons for your next design.

CSS Tutorials

Add to Cart Buttons – Colorable

This tutorial help you to create simple add to cart buttons, very easy to change Color.

CSS Tutorials

Button Maker

CSS-Tricks is a button generator that can be operated easily via sliders. In addition to size and roundness, you can also define the routes and mouse over conditions.

CSS Tutorials

Flat button styling with CSS3

In this tutorial you can see some examples of flat button styling with CSS3. All buttons have an HTML code.

CSS Tutorials

Beautiful Flat Buttons

This tutorial is experimenting with latest trends of web design.

CSS Tutorials

Awesome CSS3 & jQuery Slide Out Button

Here is an awesome little slide out button. The inspiration for that button came from photoshop.com where Flash is used to create a nice slide out effect. This button does not behave exactly the same, but the effect is quite neat. It does not use any images and uses the border radius property to make the rounded borders.

CSS Tutorials

Comprehensive List of Browser-Specific CSS Hacks

Cross browser coding can be sometimes tricky but these browser specific css hacks can help you with your problems. With them cross browser compatibility comes to you served on a plate.

/***** Selector Hacks ******/
  
/* IE6 and below */
* html #uno  { color: red }
  
/* IE7 */
*:first-child+html #dos { color: red } 
  
/* IE7, FF, Saf, Opera  */
html>body #tres { color: red }
  
/* IE8, FF, Saf, Opera (Everything but IE 6,7) */
html>/**/body #cuatro { color: red }
  
/* Opera 9.27 and below, safari 2 */
html:first-child #cinco { color: red }
  
/* Safari 2-3 */
html[xmlns*=""] body:last-child #seis { color: red }
  
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: red }
  
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho {  color: red }
  
/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
 #diez  { color: red  }
}
  
/* iPhone / mobile webkit */
@media screen and (max-device-width: 480px) {
 #veintiseis { color: red  }
}
  
  
/* Safari 2 - 3.1 */
html[xmlns*=""]:root #trece  { color: red  }
  
/* Safari 2 - 3.1, Opera 9.25 */
*|html[xmlns*=""] #catorce { color: red  }
  
/* Everything but IE6-8 */
:root *> #quince { color: red  }
  
/* IE7 */
*+html #dieciocho {  color: red }
  
/* Firefox only. 1+ */
#veinticuatro,  x:-moz-any-link  { color: red }
  
/* Firefox 3.0+ */
#veinticinco,  x:-moz-any-link, x:default  { color: red  }
  
  
  
/***** Attribute Hacks ******/
  
/* IE6 */
#once { _color: blue }
  
/* IE6, IE7 */
#doce { *color: blue; /* or #color: blue */ }
  
/* Everything but IE6 */
#diecisiete { color/**/: blue }
  
/* IE6, IE7, IE8 */
#diecinueve { color: blue\9; }
  
/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }
  
/* IE6, IE7 -- acts as an !important */
#veintesiete { color: blue !ie; } /* string after ! can be anything *

Pseudo-Elements

In this tutorial you can know about Pseudo elements. There are lots of use cases for these elements and in this tutorial you can see demonstration, which is to add a special character to menu items that have sub-menus hidden underneath them.

CSS Tutorials

Cross-Browser Transparency via CSS

You can quickly and easily apply transparency to any supportive element by adding the following CSS code your stylesheet:

selector {
	filter: alpha(opacity=50); /* internet explorer */
	-khtml-opacity: 0.5;      /* khtml, old safari */
	-moz-opacity: 0.5;       /* mozilla, netscape */
	opacity: 0.5;           /* fx, safari, opera */
	}

MAKE AWESOME FLAT BUTTONS (WITH CSS)

It’s easy to see the trend to these buttons: They’re simple, they’re elegant, and they usually have some quirkly-but-awesome animation effect. In this tutorial, you have to follow some step-by-step instructions for how to set this up.

CSS Tutorials

Simple CSS buttons

Here is a series of simple CSS buttons. They are easy to customize and use. These buttons can easily be integrated other icons library to bring it out more.

CSS Tutorials

Related Posts:

Dibakar Jana

Author Dibakar Jana

CEO & Founder of Djdesignerlab.com & ThemePurpose.com

More posts by Dibakar Jana

Leave a Reply

Subscribe to our Daily News Digest

Sign Up for our newsletter and get access to a Free download of one of Premium our Wordpress Theme.

This information will never be shared with any third party.