:before and :after background-image button with mouse over effect

Add below cod in HTML....

<p class="btn" > <a  class="btn1"href="#">btn</a></p>


.btn1
{
 background: url("../images/cen.png") repeat-x;
 padding:10px 6px 20px 6px;
}

.btn:before {   
 background: url("../images/ltr.png") no-repeat;   
 padding: 10px 6px 20px 6px;    
content: " ";
}

.btn:after {    
background: url("../images/rtl.png") no-repeat;    
padding: 10px 6px 20px 6px;    
content: " ";
}


.btn1:hover
{ 
background: url("../images/cen-hover.png") repeat-x; 
padding:10px 6px 20px 6px;
}

.btn:hover:before 
{    
background: url("../images/ltr-hover.png") no-repeat;    
padding: 10px 6px 20px 6px;    
content: " ";
}

.btn:hover:after
{    
background: url("../images/rtl-hover.png") no-repeat;    
padding: 10px 6px 20px 6px;   
 content: " ";
}