Create CSS3 button with Pseudo elements

VIEW DEMO | DOWNLOAD

Pseudo elements or Pseudo Class, CSS pseudo-classes are used to add special effects to some selectors.

Hola, amigos. For the last month or so, I’ve been experimenting with the power of CSS pseudo-elements, specially when it comes to mixing them with buttons and that way recreating some great effects that were only possible to do with sprites, in the past.

In this tutorial, I’ll show you how to create buttons with a twist, using just one anchor tag per button and the great power of CSS.

The font used is ‘Open Sans’ by Steve Matteson.

Disclaimer:
I’ll not be using CSS vendor prefixes in this tutorial or else it would be crazy long, but you will find them in the downloadable files.

I avoided CSS transitions since, right now, Firefox is the only browser that supports them on pseudo-elements. Plus, I believe that these buttons work just fine without them.

Markup

The structure of all these buttons needs just one anchor tag for it to work, since we will be creating the other elements with the ::before pseudo-class.

1
2
3
<a href="#" class="a_demo_one">
     Click me!
</a>

EXAMPLE 1

cssbuttons_01

I think this is the easiest one, with a very regular CSS.

CSS

First of all, we will give the general style of the button, including its active state. It is important to notice the relative positioning, since it will help us later with the positioning of the ::before element:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.a_demo_one {
    background-color:#ba2323;
    padding:10px;
    position:relative;
    font-family: 'Open Sans', sans-serif;
    font-size:12px;
    text-decoration:none;
    color:#fff;
    border: solid 1px #831212;
    background-image: linear-gradient(bottom, rgb(171,27,27) 0%, rgb(212,51,51) 100%);
    border-radius: 5px;
}
.a_demo_one:active {
    padding-bottom:9px;
    padding-left:10px;
    padding-right:10px;
    padding-top:11px;
    top:1px;
    background-image: linear-gradient(bottom, rgb(171,27,27) 100%, rgb(212,51,51) 0%);
}

Then, we create the gray container using the ::before pseudo-element. Absolute positioning makes our life easier to, believe it or not, position our element:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.a_demo_one::before {
    background-color:#ccd0d5;
    content:"";
    display:block;
    position:absolute;
    width:100%;
    height:100%;
    padding:8px;
    left:-8px;
    top:-8px;
    z-index:-1;
    border-radius: 5px;
    box-shadow: inset 0px 1px 1px #909193, 0px 1px 0px #fff;
}

EXAMPLE 2

cssbuttons_02

This one is a little bit more complex because of the 3D’ish look. This button is outside of its ‘container’, but when you click it, it goes down:

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.a_demo_two {
    background-color:#6fba26;
    padding:10px;
    position:relative;
    font-family: 'Open Sans', sans-serif;
    font-size:12px;
    text-decoration:none;
    color:#fff;
    background-image: linear-gradient(bottom, rgb(100,170,30) 0%, rgb(129,212,51) 100%);
    box-shadow: inset 0px 1px 0px #b2f17f, 0px 6px 0px #3d6f0d;
    border-radius: 5px;
}
.a_demo_two:active {
    top:7px;
    background-image: linear-gradient(bottom, rgb(100,170,30) 100%, rgb(129,212,51) 0%);
    box-shadow: inset 0px 1px 0px #b2f17f, inset 0px -1px 0px #3d6f0d;
    color: #156785;
    text-shadow: 0px 1px 1px rgba(255,255,255,0.3);
    background: rgb(44,160,202);
}

And here’s the tricky part:

Since the position of the pseudo-element depends on its parent, once the parent moves down a few pixels, you have to move up the pseudo-element that same amount of pixels.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.a_demo_two::before {
    background-color:#072239;
    content:"";
    display:block;
    position:absolute;
    width:100%;
    height:100%;
    padding-left:2px;
    padding-right:2px;
    padding-bottom:4px;
    left:-2px;
    top:5px;
    z-index:-1;
    border-radius: 6px;
    box-shadow: 0px 1px 0px #fff;
}
.a_demo_two:active::before {
    top:-2px;
}

EXAMPLE 3

cssbuttons_03

I think this one is my favorite since it was the first one I ever made this way and people seem to really like it. It is a divided button that “breaks” once you click it.

CSS

Again, the first thing we have to do is create the lighter part. In here, you’ll notice a right margin, this is in order to compensate for the width of the pseudo-element if you want to center the button. You don’t need it if that is not a problem for you.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.a_demo_three {
    background-color:#3bb3e0;
    font-family: 'Open Sans', sans-serif;
    font-size:12px;
    text-decoration:none;
    color:#fff;
    position:relative;
    padding:10px 20px;
    border-left:solid 1px #2ab7ec;
    margin-left:35px;
    background-image: linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;
}
.a_demo_three:active {
    top:3px;
    background-image: linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
    box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999;
}

And then the pseudo-element’s CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
.a_demo_three::before {
    content:"·";
    width:35px;
    max-height:29px;
    height:100%;
    position:absolute;
    display:block;
    padding-top:8px;
    top:0px;
    left:-36px;
    font-size:16px;
    font-weight:bold;
    color:#8fd1ea;
    text-shadow:1px 1px 0px #07526e;
    border-right:solid 1px #07526e;
    background-image: linear-gradient(bottom, rgb(10,94,125) 0%, rgb(14,139,184) 100%);
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 0px 10px 5px #999 ;
}
.a_demo_three:active::before {
    top:-3px;
    box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 1px 1px 0px 0px #044a64, 2px 2px 0px 0px #044a64, 2px 5px 0px 0px #044a64, 6px 4px 2px #0b698b, 0px 10px 5px #999 ;
}

EXAMPLE 4

cssbutton_04

This time, we will use the pseudo-element as a pointer, using one image as a background, though you can use some of those great icon fonts.

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
.a_demo_four {
    background-color:#4b3f39;
    font-family: 'Open Sans', sans-serif;
    font-size:12px;
    text-decoration:none;
    color:#fff;
    position:relative;
    padding:10px 20px;
    padding-right:50px;
    background-image: linear-gradient(bottom, rgb(62,51,46) 0%, rgb(101,86,78) 100%);
    border-radius: 5px;
    box-shadow: inset 0px 1px 0px #9e8d84, 0px 5px 0px 0px #322620, 0px 10px 5px #999;
}
.a_demo_four:active {
    top:3px;
    background-image: linear-gradient(bottom, rgb(62,51,46) 100%, rgb(101,86,78) 0%);
    box-shadow: inset 0px 1px 0px #9e8d84, 0px 2px 0px 0px #322620, 0px 5px 3px #999;
}
.a_demo_four::before {
    background-color:#322620;
    background-image:url(../images/right_arrow.png);
    background-repeat:no-repeat;
    background-position:center center;
    content:"";
    width:20px;
    height:20px;
    position:absolute;
    right:15px;
    top:50%;
    margin-top:-9px;
    border-radius: 50%;
    box-shadow: inset 0px 1px 0px #19120f, 0px 1px 0px #827066;
}
.a_demo_four:active::before {
    top:50%;
    margin-top:-12px;
    box-shadow: inset 0px 1px 0px #827066, 0px 3px 0px #19120f, 0px 6px 3px #382e29;
}

EXAMPLE 5

cssbuttons_05

This example is a bit cheesy, I know, but you can use it in so many and really useful ways.

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
.a_demo_five {
    background-color:#9827d3;
    width:150px;
    display:inline-block;
    font-family: 'Open Sans', sans-serif;
    font-size:12px;
    text-decoration:none;
    color:#fff;
    position:relative;
    margin-top:40px;
    padding-bottom:10px;
    padding-top:10px;
    background-image: linear-gradient(bottom, rgb(168,48,232) 100%, rgb(141,32,196) 0%);
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    box-shadow: inset 0px 1px 0px #ca73f8, 0px 5px 0px 0px #6a1099, 0px 10px 5px #999;
}
.a_demo_five:active {
    top:3px;
    background-image: linear-gradient(bottom, rgb(168,48,232) 0%, rgb(141,32,196) 100%);
    box-shadow: inset 0px 4px 1px #7215a3, 0px 2px 0px 0px #6a1099, 0px 5px 3px #999;
}
.a_demo_five::before {
    background-color:#fff;
    background-image:url(../images/heart.gif);
    background-repeat:no-repeat;
    background-position:center center;
    border-left:solid 1px #CCC;
    border-top:solid 1px #CCC;
    border-right:solid 1px #CCC;
    content:"";
    width:148px;
    height:40px;
    position:absolute;
    top:-30px;
    left:0px;
    margin-top:-11px;
    z-index:-1;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
.a_demo_five:active::before {
    top: -33px;
    box-shadow: 0px 3px 0px #ccc;
}

IN THE END

And well, this is it, for now. Remember that these buttons are still kind of experimental, so not every browser supports them that well.

Thank you for reading this tutorial and I hope that you find it useful.

VIEW DEMO | DOWNLOAD

Original link: http://tympanus.net/codrops/2012/01/11/css-buttons-with-pseudo-elements/

HTML5 and CSS3 Boilerplate Page Layout Code

We are building websites using HTML5 and CSS3.  It can be done fairly easily.  When “Googling around” for HTML5 “boilerplate” page examples we found a lack of layout advice and  information.  It seemed no one wanted to go farther than these types of examples:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />

<title>
HTML 5 boilerplate
</title>

<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<style>
article, aside, details, figcaption, figure, footer, header,
hgroup, menu, nav, section { display: block; }
</style>

</head>
<body>
<p>Hello World</p>
</body>
</html>

Notice the conditional statement [if IE]? This code calls a JavaScript if the Internet Explorer browser is detected.  Hosted on googlecode.com, this “shiv” (or “shim”) was created because IE doesn’t understand the HTML5 elements “abbr, article, aside, audio, bb, canvas, datagrid, datalist, details, dialog, eventsource, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, time and video”.  The JavaScript uses the Document Object Model  (DOM) and creates the elements for IE browsers at page render so that they can be styled with CSS.

document.createElement('header');

The problem is that the shiv didn’t handle PNG images and other IE rendering issues.  If you decide to go this route, we suggest that you instead use the following code for IE 9 and below:

<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js" type="text/javascript></script>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script>
<![endif]-->

However, that was not our choice.
We opted instead for the newer “modernizr”  JavaScript library ( www.modernizr.com ) that  adds classes to the <html> element which allows you to target specific browser functionality in your stylesheet.  You don’t actually need to write any JavaScript to use it.  Just include the modernizr-1.5.min.js JavaScript file in your page and add a class of “no-js” to your <html> element. After it automatically executes, you’ll be able to use the Modernizr JavaScript object and the various CSS classes it’ll attach to the html element.  We also added a call to the jQuery library since we use this on a regular basis.

So here is what our HTML5 page markup looks like now:

<!DOCTYPE html>
<html lang="en" dir="ltr" id="texaswebdevelopers">
<head>
<meta charset="utf-8" />
<title>HTML5 and CSS3 Boilerplate</title>
<link rel="shortcut icon"  href="favicon.ico">
<meta name="description" content="HTML5 and CSS3 boilerplate page example." />
<meta name="keywords" content="html5, css3" />
<link rel="stylesheet" href="css/main.css" type="text/css" />
<!-- modernizr.com -->
<script src="js/modernizr-1.5.min.js"></script>
<!-- jQuery (hosted by Google) -->
<script src="http://ajax.googleapis.com/ajax/libs/
jquery/1.4.2/jquery.min.js"></script>
</head>
<body id="home">
<p>Hello World</p>
</body>
</html>

If you take a look at the very beginning example, you may have noticed the <style> tag that takes the following elements and sets them to display as block level elements (<div>).

<style>
article, aside, details, figcaption, figure, footer, header,
hgroup, menu, nav, section { display: block; }
</style>

Rather than placing this on each individual page we created a global CSS reset and moved it into our external stylesheet:

/* BEGIN RESETS CSS */
/* HTML5 tags */

article, aside, dialog, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, hr, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figcaption, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video {
margin: 0;
border: 0;
padding: 0;
outline: 0;
font-size: 1em;
vertical-align: baseline;
background-color: transparent;
}

a {
margin: 0;
border: 0;
padding: 0;
font-size: 1em;
vertical-align: baseline;
background-color: transparent;
}

abbr[title], dfn[title] {
border-bottom: 1px dashed #CCC;
cursor: help;
}

blockquote, q {
quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}

caption, th, td {
text-align: left;
font-weight: normal;
}

del {
text-decoration: line-through;
}

/* remember to define focus styles! */
:focus {
outline: 0;
}

ins {
text-decoration: none;
}

mark {
color: #000;
background-color: #FF9;
font-style: italic;
font-weight: bold;
}

ol, ul {
list-style: none;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}

textarea {
margin: 0; padding: 0;
}

/* END  RESETS CSS */

In our working example, where you may download the html and css files, we provided a layout that uses the majority of the html5 tags that a developer would use to create a simple page.  This is boilerplate – the basic layout and structure you can build upon to eventually add those exciting video, canvas and drag and drop tags!

Our final layout has this overall structure:

<!DOCTYPE html>
<html lang="en" dir="ltr" id="texaswebdevelopers">
<head>
<meta charset="utf-8" />
<title></title>
<link rel="shortcut icon" href="favicon.ico">
<meta name="description" content="HTML5 and CSS3 boilerplate page example." />
<meta name="keywords" content="html5, css3" />
<link rel="stylesheet" href="css/main.css" type="text/css" />
<!-- modernizr.com -->
<script src="js/modernizr-1.5.min.js"></script>
<!-- jQuery (hosted by Google) -->
<script src="http://ajax.googleapis.com/ajax/libs/
jquery/1.4.2/jquery.min.js"></script>
</head>

<body id="home">
<header>
<hgroup>
<h1></h1>
</hgroup>
</header>

<nav>
<ul>
<li><a href="#" title="home">link</a></li>
<li><a href="#" title="text">link</a></li>
</ul>
</nav>

<aside>
<article>
<figure>
<img src="logo.jpg" alt="text" />
</figure>
<hgroup>
<h2>Featured Article</h2>
<h3><a href="#">link text</a></h3>
</hgroup>
<p>text</p>
<p>Published on <time datetime="2010-08-10" pubdate>10 August 2010</time></p>
</article>
</aside>

<section id="content">
<ol id="posts-list">
<li><article>
<header><h2><a href="#" rel="bookmark" title="Permalink">Blog Post Example</a></h2></header>
</p>
<p>article content</p>
<footer>
<abbr title="2010-08-08T14:07:00+06:00"><!-- YYYYMMDDThh:mm:ss+ZZZZ -->8th August 2010</abbr>
<address><a href="#">TexasWebDevelopers</a></address>
</footer><!-- post 1 -->
</article></li>
<li><article>
<header><h2><a href="#" rel="bookmark" title="Permalink">Web Form Example</a></h2></header>
</p>
<form>
<fieldset>
<legend>Requires Opera</legend>
<label for="fname">First Name:</label>
<input type="text" name="fname" id="fname" required autofocus />
<label for="email">Email:</label>
<input type="email" name="email" id="email" />
<label for="website">Website:</label>
<input type="url" name="website" id="website" />
<label for="age">Age:</label>
<input type="number" name="age" id="age" />
<label for="birthday">Birthday:</label>
<input type="date" name="birthday" id="birthday" />
<label for="salutation">Salutation:</label>
<input type="text" name="salutation" id="salutation" list="options">
<datalist id="options">
<option value="Mr.">
<option value="Mrs.">
</datalist>
<input type="submit" />
</fieldset>
</form>
<footer>
<abbr title="2010-08-09T14:07:00+06:00"><!-- YYYYMMDDThh:mm:ss+ZZZZ -->9th August 2010</abbr>
<address><a href="#">TexasWebDevelopers</a></address>
</footer><!-- post 2 -->
</article></li>
</ol>
</section><!-- /#content -->

<section id="extras">
<div>
<h2>blogroll</h2>
<ul>
<li><a href="#" rel="external">link</a></li>
<li><a href="#" rel="external">link</a></li>

<li><a href="#" rel="external">link</a></li>
<li><a href="#" rel="external">link</a></li>
</ul>
</div><!-- /.blogroll -->

<div>
<h2>social</h2>
<ul>
<li><a href="http://www.texaswebdevelopers.com/blog/" rel="me">blog</a></li>
</ul>
</div><!-- /.social -->
</section><!-- /#extras -->

<footer>
<address>
<span>&#169; 1995-2010 <a href="http://www.TexasWebDevelopers.com">Texas Web Developers</a></span>
</address>
</footer>

</body>
</html>

Original link and discuss here: http://www.texaswebdevelopers.com/blog/template_permalink.asp?id=136

Dynamic Favicons using HTML5 Local Storage and TinyCon

I was perusing Github the other day and I came across this awesome little JavaScript library. It’s called TinyConand it’s a small library for manipulating the favicon in your browser. It adds alert bubbles and changing images pretty similar to the way Gmail does.

Gmail Favicon Notification

It’s basically a really fun little library that allows you to add a notification bubble to your favicons. I started to play around with the code provided on Github and got up and running in no time.

<html>
<head>
<link rel=”icon” href=”favicon.ico”>
<title>Tinycon</title>
<script src=”../tinycon.js”></script>
<script>
(function(){
var count = 0;
setInterval(function(){
if (++count > 99) count = 0;
Tinycon.setBubble(count);
}, 1000);
})();
</script>
</head>
<body>
</body>
</html>

Using this simple example will give you something like this:

TinyCon Favicon Example

As you can see the above example is really simple and not really real world. It’s using a timer to update the icon every second. After messing around with the example on the site, I wondered how I could apply the notifications to this site. If I checked the last blog entry that they read on this site, then I would be able to notify them if there were any new blog post’s since their last visit. It’s just a fun experiment really!

If you are a regular visitor to the site, you might notice that you have a notification next to the favicon. This is how I went about it.

 <input type=“hidden” id=“blogCount” name=“blogCount” value=“<%= TempData["TotalPageCount"] %>” />
    <script type=“text/javascript”>
        // Check if user can handle localStorage first.
        if (typeof (localStorage) != ‘undefined’) {
            GetCount();
        }
        function GetCount() {
            // Get the last value
            var blogCount = localStorage.getItem(‘blogCount’);
            // If null, then set it
            if (blogCount == null) {
                localStorage.setItem(“blogCount”, document.getElementById(‘blogCount’).value); //saves to the database, “key”, “value”
            } else {
                // If not null then check the last count and compare
                var result = document.getElementById(‘blogCount’).value - blogCount;
                // If different, then show the favicon bubble
                if (result > 0) {
                    if (result != document.getElementById(‘blogCount’).value) {
                        window.Tinycon.setBubble(result);
                        // Re-add to localStorage
                        localStorage.setItem(“blogCount”, document.getElementById(‘blogCount’).value); //saves to the database, “key”, “value”
                    }
                }
            }
        }
    </script>

Original link: http://deanhume.com/Home/BlogPost/dynamic-favicons-using-html5-local-storage-and-tinycon/68

Ping your blog, website, or RSS feed for Free Sitetag