creating CSS slider buttons to look like bbc.co.uk

Question

I am trying to make a slider look like the slider at bbc.co.uk. The problem I am having is making the buttons look like the buttons on the bbc website. Below is my css code thus far for the buttons. However I can not seem to get the positioning, and the way it expands to include text. Or the slide on hover and size.

http://jsfiddle.net/9AWhg/

.hero-carousel-nav {
        width: 980px;
        position: absolute;
        bottom: 0;
        left: 50%;
        margin-left: -490px;
        z-index: 2;
        }

        .hero-carousel-nav li {
            position: absolute;
            bottom: 48px;
            right: 48px;
            list-style: none;
            }

        .hero-carousel-nav li.prev {
            left: 48px;
            right: auto;
            }

        .hero-carousel-nav li a {
            background: #000;
            color: #fff;
            border: none;
            outline: none;
            display: block;
            float: left;
            padding: 5px 20px;
            behavior: url(/assets/PIE.htc);
            }

        .hero-carousel-nav li a:hover { 
            background: #09C;
            }

        .hero-carousel-nav li a:active,
        .hero-carousel-nav li a:focus { 
            border: none;
            outline: none;
            }

Answer 1

This FIDDLE may give you a start. I have focused ONLY on the arrow part, as stated in your question.

Find/make an arrow that you like as a jpg or png and pre-load it into the pointer div.

Load all of your pictures into the hidden/carousel div.

Move your pictures into the imagediv as a function of the "click" but do not display them - use display: none; .

On mouseover of the holderdiv, display the pictures, and on mouseout hide them again.

There are hundreds of different ways to do this. I'll bet there will be other nice ideas.

JS

var myimage = $('.carouseldiv img:nth-child(1)');    
$('.pointer').append( myimage );


$('.pointer').mouseover(function(){
  $('.pointer').css( 'background-color', '#91c5f2');
  $('.pointer img:last-child').css({ 'display': 'inline-block'
                         });
});

$('.pointer').mouseout(function(){
  $('.pointer').css('background-color', '#e0e0e0');
  $('.pointer img:last-child').css({ 'display': 'none'
                                    });

});

---

Here is a slightly different approach, to perhaps give you more food for thought. FIDDLE