What I Believe Buttons

by Koubenec

HTML

<div id="pagebuttonhome" onclick = "top.location.href='http://wacaustin.org/home/'"><div id="arrow-border-left"></div><div id="arrow-border-right"></div><div class="arrow-up-internal"></div><div class="arrow-up"></div></div>

CSS

#arrow-border-left {
  width:0px; 
  height:0px; 
  border-left:22px solid transparent;  /* left arrow slant */
  border-right:22px solid transparent; /* right arrow slant */
  border-top:22px solid #E27AC2; /* bottom, add background color here */
  font-size:0px;
  line-height:0px;
  margin-left: auto;
  margin-right: auto;
  top: 10px;
  left: 180px;
  position: absolute;
  z-index: 100;
}

#arrow-border-right {
  width:0px; 
  height:0px; 
  border-left:22px solid transparent;  /* left arrow slant */
  border-right:22px solid transparent; /* right arrow slant */
  border-top:22px solid #E27AC2; /* bottom, add background color here */
  font-size:0px;
  line-height:0px;
  margin-left: auto;
  margin-right: auto;
  top: 10px;
  left: 250px;
  position: absolute;
  z-index: 100;
}

div.arrow-up {
  width:0px; 
  height:0px; 
  border-left:22px solid transparent;  /* left arrow slant */
  border-right:22px solid transparent; /* right arrow slant */
  border-top:22px solid #fff; /* bottom, add background color here */
  font-size:0px;
  line-height:0px;
  margin-left: auto;
  margin-right: auto;
  top: 10px;
  left: 214px;
  position: absolute;
  z-index: 98;
}

div.arrow-up-internal {
  width:0px; 
  height:0px; 
  border-left:13px solid transparent;  /* left arrow slant */
  border-right:13px solid transparent; /* right arrow slant */
  border-top:13px solid #E27AC2; /* bottom, add background color here */
  font-size:0px;
  line-height:0px;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  top: 10px;
  left: 223px;
  z-index: 99;
}

#pagebuttonhome {
width: 450px;
height: 40px;
background-color: #E27AC2;
position: absolute;
overflow: hidden;
left: 40px;
bottom: 0px;
margin-top: 5px;
margin-bottom: 5px;
font-size: 17px;
letter-spacing: 2px;
text-align: center;
line-height: 30px;
color: #dc2d18;
}

JavaScript

$(document).ready(function() {
    $(".arrow-up").hover(function() {
        $(this).stop().animate({
            "backgroundColor": "#fff",
            "color": "#F26522"
        }, 'fast');
    }, function() {
        $(this).stop().animate({
            "backgroundColor": "#F26522",
            "color": "#fff"
        }, 'fast');   
    });
    $("#mainsite").hover(function() {
        $(this).stop().animate({
            "backgroundColor": "#fff",
            "color": "#2D8E8E"
        }, 'fast');
    }, function() {
        $(this).stop().animate({
            "backgroundColor": "#2D8E8E",
            "color": "#fff"
        }, 'fast');   
    });
    $("#whatibelieve").hover(function() {
        $(this).stop().animate({
            "backgroundColor": "#fff",
            "color": "#E27AC2",
        }, 'fast');
    }, function() {
        $(this).stop().animate({
            "backgroundColor": "#E27AC2",
            "color": "#fff"
        }, 'fast');   
    });
    $("#mobile").hover(function() {
        $(this).stop().animate({
            "backgroundColor": "#fff",
            "color": "#80AF35"
        }, 'fast');
    }, function() {
        $(this).stop().animate({
            "backgroundColor": "#80AF35",
            "color": "#fff"
        }, 'fast');   
    });
});