CSS3 Data-attribute properties to create beautiful buttons

Before the introduction of several CSS3 implementation of the button, today for users to more fresh, with CSS3 Data-attribute Property Development button, when the mouse through the display button details. And the implementation process is simple, a few lines of code will be done. Let's give it a try. Such as:

Online preview Source Download

Good, paste the implementation code:

HTML code:

  <data-hover= "Love Programming (w2bc.com) collection programming materials, Web front end case">             Love programming  </button>

CSS code:

Button{background:#db701f;Border:Solid 7px #000;padding:20px;Box-shadow:inset 0 0 6px #824212;Text-transform:Uppercase;Font-weight:Bold;font-family:"Tahoma", Sans-serif;Text-shadow:1px 1px 3px #824212;Color:#fff;position:relative;width:300px;font-size:16px; }Button:hover{background:Green; }Button:hover:before{/*-------This is the MAGIC----------------*/content:attr (data-hover);/* ------------------------------------------*/Display:Block;background:#000;position:Absolute;Top:100%; Left:-7px; Right:-7px;padding:15px; }Button:hover:after{content: "";position:Absolute;Display:Block;width:0;Height:0;Border:Solid 10px Transparent;Border-bottom-color:#000;Bottom:0; Left:50%;Margin-left:-10px;Z-index:2; }. Note{Margin-top:100px;Display:Block; }