CSS styled slider buttons, with CSS triangles

If you find this free website useful – why don’t you support this with a donation? It is easy…. read more ….

You can style slider buttons using css.   A simple clean style is arrows with a square box ( or a circle ).

An example is like this 

The code is like this

<a href="#"><div class='arrow-wrap left'>
    
    </div></a>

<a href="#"><div class='arrow-wrap right'>
    
    </div></a>

Which sets up the links and a div per link

then the css sets the size of the divs and adds a background, and uses after: to create a css triangle and then positions it

.arrow-wrap.right:after {
    content:'';
    position: absolute;
    top: 4px;
    left: 9px;
    border-style: solid;
    border-width: 9px 0 9px 9px;
    border-color: transparent transparent transparent #fff;
}
.arrow-wrap.left:after {
    content:'';
    position: absolute;
    top: 4px;
    left: 7px;
    border-style: solid;
    border-width: 9px 9px 9px 0;
    border-color: transparent #fff transparent transparent;
}
.arrow-wrap {
    position: relative;
    height: 25px;
    width: 25px;
    background: red;
}

See http://jsfiddle.net/locally/LL5dczoq/

If you prefer round buttons, you can use border radius, and if you want to give it a bit of feel on hover then you can apply some colour tweaks to the css triangles

a bit like this

.arrow-wrap.left:hover:after {
    border-color: transparent grey transparent transparent;
}
.arrow-wrap.right:hover:after {
    border-color: transparent transparent transparent grey;
}
.arrow-wrap {
    position: relative;
    height: 25px;
    width: 25px;
    background: red;
    border-radius: 50px;
}

see http://jsfiddle.net/locally/m9cqv18v/

I have no idea how cross browser safe this is and if anything needs to be tweaked. i would guess IE 6 is out and maybe IE will have issues in other versions. Please leave me comments if you have cross browser tweaks.