What I Believe Buttons

by Koubenec

HTML

<div id="upbuttoncontainer" onclick = "top.location.href='http://wacaustin.org/home/'"><div id="uptopdiv"><div id="uptoparrow-border-left"></div><div id="uptoparrow-border-right"></div><div id="uptoparrow-up-internal"></div><div id="uptoparrow-up"></div></div><div id="upbottomdiv"><div id="uparrow-border-left"></div><div id="uparrow-border-right"></div><div id="uparrow-up-internal"></div><div id="uparrow-up"></div></div></div>

<div id="downbuttoncontainer" onclick = "top.location.href='http://wacaustin.org/home/'"><div id="downtopdiv"><div id="downtoparrow-border-left"></div><div id="downtoparrow-border-right"></div><div id="downtoparrow-up-internal"></div><div id="downtoparrow-up"></div></div><div id="downbottomdiv"><div id="downarrow-border-left"></div><div id="downarrow-border-right"></div><div id="downarrow-up-internal"></div><div id="downarrow-up"></div></div></div>

CSS

#uparrow-border-left {
  width:0px; 
  height:0px; 
  border-left:22px solid transparent;  /* left arrow slant */
  border-right:22px solid transparent; /* right arrow slant */
  border-bottom: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;
}

#uparrow-border-right {
  width:0px; 
  height:0px; 
  border-left:22px solid transparent;  /* left arrow slant */
  border-right:22px solid transparent; /* right arrow slant */
  border-bottom: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;
}

#uparrow-up {
  width:0px; 
  height:0px; 
  border-left:22px solid transparent;  /* left arrow slant */
  border-right:22px solid transparent; /* right arrow slant */
  border-bottom: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;
}

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

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

#uptopdiv {
width: 450px;
height: 40px;
background-color: #fff;
position: absolute;
overflow: hidden;
left: 0px;
bottom:...

JavaScript

$(document).ready(function() {
    $("#downtopdiv").hover(function() {
        $(this).stop().animate({
            "opacity": "0"
        }, 'fast');
    }, function() {
        $(this).stop().animate({
            "opacity": "1"
        }, 'fast');   
    });
    $("#uptopdiv").hover(function() {
        $(this).stop().animate({
            "opacity": "0"
        }, 'fast');
    }, function() {
        $(this).stop().animate({
            "opacity": "1"
        }, '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');   
    });
});