CSS Sprite button using span and anchor - HTML CSS CSS Form

HTML CSS examples for CSS Form:input button style

  1. HOME
  2. HTML CSS
  3. CSS Form
  4. input button style

Description

CSS Sprite button using span and anchor

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">

.readMore {<!--   w w w .  j  av a2 s. c o m-->
   font-size: 12px;
   padding-right: 11px;
   background: url(https://www.java2s.com/style/demo/InternetExplorer.png) no-repeat right -24px;
   padding-top: 3px;
   padding-bottom: 5px;
}

.readMore span {
   padding-left: 14px;
   background: url(https://www.java2s.com/style/demo/InternetExplorer.png) no-repeat;
   padding-top: 3px;
   padding-bottom: 6px;
}

.readMore:hover {
   background-position: right -72px;
}

.readMore:hover span,
.readMore span:hover {
   background-position: 0 -48px;
}

a {
   text-decoration: none;
   font: 12px/16px arial;
   color: #777;
}

a:hover {
   color: #999;
   text-shadow: 1px 1px 0px #FFF
}

      </style> 
 </head> 
 <body> 
  <div style="padding: 100px;"> 
   <a href="#" class="readMore"> <span>Really Really REALLY long one</span> </a> 
  </div>  
 </body>
</html>

Related Tutorials