Portal Buttons

by mrjordy

HTML

<div id="preload">
   <img src="hover_png-url-here" width="1" height="1"/>
</div>

<div class="sp-button"> 
    <a href="#">
        <div class="single-button">
            <img src="http://techstatic.org/falconwood-pitch/sp-icons/home.png"  onmouseover="this.src='http://techstatic.org/falconwood-pitch/sp-icons/home-hover.png'" onmouseout="this.src='http://techstatic.org/falconwood-pitch/sp-icons/home.png'" />
            <p>Button</p>
        </div>
    </a>
</div>
<center>--------------------------------------------------------------------------</center>
<div class="sp-button"> 
    <a href="#">
        <div class="two-button">
            <img src="http://techstatic.org/falconwood-pitch/sp-icons/home.png"  onmouseover="this.src='http://techstatic.org/falconwood-pitch/sp-icons/home-hover.png'" onmouseout="this.src='http://techstatic.org/falconwood-pitch/sp-icons/home.png'" />
            <p>Left Button Description</p>
        </div>
    </a>
    <a href="#">
        <div class="two-button">
            <img src="http://techstatic.org/falconwood-pitch/sp-icons/home.png"  onmouseover="this.src='http://techstatic.org/falconwood-pitch/sp-icons/home-hover.png'" onmouseout="this.src='http://techstatic.org/falconwood-pitch/sp-icons/home.png'" />
            <p>Right Button Description</p>
        </div>
    </a>
</div>
<center>--------------------------------------------------------------------------</center>
<div class="sp-button">
    <a href="#">
        <div class="three-button">
            <img src="http://techstatic.org/falconwood-pitch/sp-icons/home.png" onmouseover="this.src='http://techstatic.org/falconwood-pitch/sp-icons/home-hover.png'" onmouseout="this.src='http://techstatic.org/falconwood-pitch/sp-icons/home.png'" />
            <p>Leftmost Button Description</p>
        </div>
    </a>
    <a href="#">
        <div class="three-button">
            <img src="http://techstatic.org/falconwood-pitch/sp-icons/home.png"...

CSS

#preload { 
    display: none; 
}
/*----------removes link borders----------*/
.ms-WPBody A:link, .ms-WPBody A:visited {
color: white;
}
.sp-button {
    width: 100%;
    display: inline-block;
}
/*----------style all----------*/
 .sp-button > a {
    text-decoration: none;
}
 .sp-button > a > .single-button, .sp-button > a > .two-button, .sp-button > a > .three-button, .sp-button > a > .four-button, .sp-button > a > .five-button {
    margin-left: auto;
    margin-right: auto;
    display: inline-block;
    line-height: 15px;
    text-align: center;
    min-width: 80px;
    color: #2055a4;
    vertical-align: middle;
}
.sp-button > a > .single-button:hover, .sp-button > a > .two-button:hover, .sp-button > a > .three-button:hover, .sp-button > a > .four-button:hover, .sp-button > a > .five-button:hover {
    color: #2F7AEA;
}
.sp-button > a > .single-button > p, .sp-button > a > .two-button > p, .sp-button > a > .three-button > p, .sp-button > a > .four-button > p, .sp-button > a > .five-button > p {
    margin-top: 0;
}
/*----------style individual----------*/
 .sp-button > a > .single-button {
    width:92%;
    min-width: 80px;
    padding-left: 4%;
    padding-right: 4%;
}
.sp-button > a > .two-button {
    width:46%;
    padding-left: 1%;
    padding-right: 1%;
}
.sp-button > a > .three-button {
    width:30%;
    padding-left: 1%;
    padding-right: 1%;
}
.sp-button > a > .four-button {
    width:22%;
    padding-left: 1%;
    padding-right: 1%;
}
.sp-button > a > .five-button {
    width:17%;
    padding-left: 1%;
    padding-right: 1%;
}