<!-- raw import from dabblet -->
<div id="div">Contenu</div>
<button onclick="var div = document.getElementById('div');if(div.className =='on'){div.className='';}else{div.className='on'}">:hover</button>
html{font:2em sans-serif;color:#fff;}
div{position:relative;width:150px;height:150px;margin:auto;min-width:150px;max-width:150px;padding:20px;background:#888;transition:all 1s;}
div::after{content:'Pseudo';position:absolute;left:20px;bottom:20px;background:deepskyblue;width:inherit;padding:inherit;}
div:hover,div.on{width:250px;}
button{
display:block;
width:120px;
height:30px;
margin:10px auto;
border:none;
border:1px solid rgba(0,0,0,.5);
border-radius:2px;
color:white;
background:#333;
background:linear-gradient(#444,#202020);
box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 1px 0 rgba(255,255,255,.3);
}
button:hover,button:focus{
background:#444;
background:linear-gradient(#555,#202020);
}
button:active{
background:#111;
background:linear-gradient(#202020,#111);
box-shadow:0 1px 0 rgba(0,0,0,.3) inset,0 1px 0 rgba(255,255,255,.3);
}
Also see: Tab Triggers