rae buttons profiles.

<!-- START OF BUTTONS -->
<!-- COLORS OF BUTTONS ARE SHOWN. WIDTH, BACKGROUND-COLOR, BORDER COLOR, AND JUST 'COLOR' (FOR TEXT COLOR IN BUTTON) ARE ALL EDITABLE. THEY USE HEX CODES. GOOGLE IT. -->

<!-- TO USE THIS CODE, YOU MUST DISABLE AUTO-FORMATTING. THIS MEANS YOU WILL HAVE TO CREATE NEW PARAGRAPHS/LINES WITH A SERIES OF <BR> TAGS INSTEAD OF SIMPLY PRESSING RETURN/ENTER. EACH <BR> TAG IS ONE PRESS OF 'RETURN' -->


<!-- YOU CAN HAVE AN INVISIBLE TABLE FOR THE BUTTONS IF YOU WANT. CHANGE BORDER="1" TO BORDER="0" -->

    <table width="1000" border="1" align="center">
      <tr>


        <td width="250" align="center" bgcolor="#000000">

        <!-- Button 1 -->


<button title="Button1" type="button" style="font-size:12px; font-weight:bold; color:#d3d3d3; width:200px; background-color:#8702ca; border-style:outset; border-color:#8702ca;"onClick="


{document.getElementById('button2') .style.display='none'}
{document.getElementById('button3') .style.display='none'}
{document.getElementById('button4') .style.display='none'}
{document.getElementById('default') .style.display='none'}


if(document.getElementById('button1') .style.display=='none') {document.getElementById('button1') .style.display=''}

else{{document.getElementById('button1') .style.display='none'}{document.getElementById('default') .style.display=''}}">

<!-- Name of button 1 -->
<b><u>- Button 1; -</u></b>


</button>

</td>




        <td width="250" align="center" bgcolor="#000000">

        <!-- Button 2 -->


<button title="Button2" type="button" style="font-size:12px; font-weight:bold; color:#d3d3d3; width:200px; background-color:#8702ca; border-style:outset; border-color:#8702ca;"onClick="


{document.getElementById('button1') .style.display='none'}
{document.getElementById('button3') .style.display='none'}
{document.getElementById('button4') .style.display='none'}
{document.getElementById('default') .style.display='none'}


if(document.getElementById('button2') .style.display=='none') {document.getElementById('button2') .style.display=''}

else{{document.getElementById('button2') .style.display='none'}{document.getElementById('default') .style.display=''}}">

<!-- Name of button 2 -->
<b><u>- Button 2; -</u></b>


</button>

</td>



        <td width="250" align="center" bgcolor="#000000">

        <!-- Button 3 -->


<button title="Button3" type="button" style="font-size:12px; font-weight:bold; color:#d3d3d3; width:200px; background-color:#8702ca; border-style:outset; border-color:#8702ca;"onClick="


{document.getElementById('button2') .style.display='none'}
{document.getElementById('button1') .style.display='none'}
{document.getElementById('button4') .style.display='none'}
{document.getElementById('default') .style.display='none'}


if(document.getElementById('button3') .style.display=='none') {document.getElementById('button3') .style.display=''}

else{{document.getElementById('button3') .style.display='none'}{document.getElementById('default') .style.display=''}}">

<!-- Name of button 3 -->
<b><u>- Button 3; -</u></b>


</button>

</td>




        <td width="250" align="center" bgcolor="#000000">

        <!-- Button 4 -->


<button title="Button4" type="button" style="font-size:12px; font-weight:bold; color:#d3d3d3; width:200px; background-color:#8702ca; border-style:outset; border-color:#8702ca;"onClick="


{document.getElementById('button2') .style.display='none'}
{document.getElementById('button3') .style.display='none'}
{document.getElementById('button1') .style.display='none'}
{document.getElementById('default') .style.display='none'}


if(document.getElementById('button4') .style.display=='none') {document.getElementById('button4') .style.display=''}

else{{document.getElementById('button4') .style.display='none'}{document.getElementById('default') .style.display=''}}">

<!-- Name of button 4 -->
<b><u>- Button 4; -</u></b>


</button>

</td>
</tr>
</table>


<!-- HERE ARE THE CONTENT OF THE BUTTONS. WHEN YOU PRESS A BUTTON, THE CORRESPONDING DATA WILL SHOW IN THE DIV TAG WITH THE APPROPRIATE ID. FEEL FREE TO MAKE A TABLE WITH A BORDER, USE FONT TAGS FOR FONT COLOR, BOLD, ITALIC, UNDERLINE. USE <BR> FOR LINE BREAKS. YOU CAN CHANGE THE BGCOLOR OF THE TABLE TOO. -->


<div id="default" style="display:inherit">
<!-- CONTENT OF DEFAULT. THIS SHOWS BY DEFAULT WHEN PAGE IS OPENED. PRESSING A BUTTON A SECOND TIME WILL CLOSE IT AND RE-SHOW DEFAULT -->
    <table width="400" border="1" align="center">
      <tr>
      <td width="400" align="center" bgcolor="#ffffff">
      <br /><br />

      Default content. Put stuff here.

      <br /><br />
      </td>
      </tr>
      </table>
</div>


<div id="button1" style="display:none">
<!-- CONTENT OF BUTTON 1 -->
    <table width="400" border="1" align="center">
      <tr>
      <td width="400" align="center" bgcolor="#ffffff">
      <br /><br />

      Button 1 content. Put stuff here.

      <br /><br />
      </td>
      </tr>
      </table>
</div>

<div id="button2" style="display:none">
<!-- CONTENT OF BUTTON 2 -->
    <table width="400" border="1" align="center">
      <tr>
      <td width="400" align="center" bgcolor="#ffffff">
      <br /><br />

      Button 2 content. Put stuff here.

      <br /><br />
      </td>
      </tr>
      </table>
</div>

<div id="button3" style="display:none">
<!-- CONTENT OF BUTTON 3 -->
    <table width="400" border="1" align="center">
      <tr>
      <td width="400" align="center" bgcolor="#ffffff">
      <br /><br />

      Button 3 content. Put stuff here.

      <br /><br />
      </td>
      </tr>
      </table>
</div>

<div id="button4" style="display:none">
<!-- CONTENT OF BUTTON 4 -->
    <table width="400" border="1" align="center">
      <tr>
      <td width="400" align="center" bgcolor="#ffffff">
      <br /><br />

      Button 4 content. Put stuff here.

      <br /><br />
      </td>
      </tr>
      </table>
</div>

<!-- END OF BUTTONS -->