Reputation:
The CSS code:
.css3_nudge ul li a {
-webkit-transition-property: color, background-color, padding-left, border-right;
-webkit-transition-duration: 400ms, 400ms, 400ms, 400ms;
}
.css3_nudge ul li a:hover {
background-color: #efefef;
color: #333;
padding-left: 50px;
border-right: 1px solid red;
}
The HTML code:
<div class="css3_nudge nudge">
<ul>
<li><a href="#" title="Home">Home</a></li>
<li><a href="#" title="Blog">Blog</a></li>
<li><a href="#" title="About">About</a></li>
<li><a href="#" title="Register">Register</a></li>
<li><a href="#" title="Contact">Contact</a></li>
</ul>
</div>
The transition is working fine for all elements but border, it just appears at the end of 400ms, there is no effect on border.
What I'm trying to achieve is a effect like the new google gmail buttons.
Thanks in advance for any help
Upvotes: 8
Views: 8540
Reputation: 29625
This is a pretty simple fix. You just need a border to already exist before the hover effect. So just set the border-right: 1px solid #fff;
like below:
.css3_nudge ul li a {
-webkit-transition-property: color, background-color, padding-left, border-right;
-webkit-transition-duration: 400ms, 400ms, 400ms, 400ms;
border-right: 1px solid #fff; /* added property */
}
Then the transition is effectively just changing the colour of the border instead of creating a border.
Upvotes: 13