css3 hover animation WordPress

• REFUNDED

I want to make a css3 hover animation. When I hover I want to have a yellow arrow animate in from left to right.

http://planeta.se/bullerWebb/butiken/

Should look like this http://planeta.se/buttonArrow.jpg

http://awesomescreenshot.com/04922q4tcc

FIDDLE, http://jsfiddle.net/Maggy/6sLeE/

The css,

#butikMenu {
width: 100%;
float: left;
margin: 0 0 3em 0;
padding: 0;
list-style: none; }
#butikMenu li {
float: left; }
#butikMenu{
width: 100%;
float: left;
margin: 0 0 3em 0;
padding: 0;
list-style: none;
border-bottom: 1px solid #ccc; }
#butikMenu li a {
background:url(images/arrowTest.png);
background-position:top left;
display: block;
padding: 20px 8px;
text-decoration: none;
text-transform:uppercase;
font-size:22px;
color: #000;
}
#butikMenu li a:hover {
background-position:105% 0 ;
-moz-transition: background-position 0.2s ease-in-out 0s;
-webkit-transition: background-position 0.2s ease-in-out 0s;
transition: background-position 0.2s ease-in-out 0s;

}

Answers (1)

2013-12-11

Balanean Corneliu answers:

#butikMenu li a {

background:url(images/arrowTest.png);

background-position:top left;

display: block;

padding: 5px 8px;

text-decoration: none;

text-transform:uppercase;

font-size:22px;

color: #000;

}

---

Balanean Corneliu comments:

If you dont need that border line you need to cut out border from:
.headingStart {
and
#butikMenu{

---

Balanean Corneliu comments:

You have a little code theare i think from some modification on home.php or index.php take a look at the printscreen.