Social Footer Menu Circular

Hola amigos hoy les dejo este pequeño tip para
colocar un menu circular con diseño elegante el resultado
final sera este:

Show content

Empezamos primero vamos al index.template.php buscamos:

Code: [Select]

<div id="footer_section"><div class="frame">
Agregamos despues:

Code: [Select]

<section id="facebook">
        <ul>
          <a href="#" target="_blank"><span id="fackbook" class="tooltip" title="Link us on Facebook">FACEBOOK</span></a>
        </ul>
    </section>
    <section id="twitter">
    <ul>
       <a href="#" target="_blank"><span id="twitter-default" class="tooltip" title="Follow us on Twitter">TWITTER</span></a>
    </ul>
    </section>
    <section id="google">
    <ul>
       <a href="#" target="_blank"><span id="google-default" class="tooltip" title="Follow us on Google Plus">Google +</span></a>
    </ul>
    </section>
   <section id="tech">
   <ul>
      <a href="http://www.portalzone.net"><span id="tech-default" class="tooltip" title="Bookmark Us">PortalZone</span></a>
   </ul>
   </section>
A hora vamos al index.css y agregamos al final:

Code: [Select]

-------------------------------------
Facebook
-------------------------------------
*/


#facebook li {
display: block;
width: 50%;
font-weight: 400;
margin-bottom: 1em;
overflow: hidden;
padding-top: 1.4em;
padding-right: 2em;
box-sizing: border-box;
-moz-box-sizing: border-box;
float: left;
}
#facebook span {
display: block;
border: 3px solid #325f83;  /*Button Border color and border size  - Techandall.com*/
border-radius: 100%;  /* you can change the border radius if you want a square button, example 10%   - Techandall.com*/
box-sizing: border-box;
-moz-box-sizing: border-box;
width: 7em;
height: 7em;
background: #01457b; /*Button background color  - Techandall.com*/
color: #fff; /*Button font color  - Techandall.com*/
font-family:Arial, Helvetica, sans-serif;
font-size: 0.6em;
line-height: 1em;
font-weight: 700;
padding: 2.7em 0 0 0;
text-align: center;
margin: -1.4em 1em 0 0;
text-transform: uppercase;
float: left;
}
#facebook span:hover {
background: #fff !important;
color: #5d6365; /*Button hover colors  - Techandall.com*/
border: 3px solid #5d6365 !important;
cursor: pointer;
}


-------------------------------------
Twitter
-------------------------------------
*/


#twitter li {
display: block;
width: 50%;
font-weight: 400;
margin-bottom: 1em;
overflow: hidden;
padding-top: 1.4em;
padding-right: 2em;
box-sizing: border-box;
-moz-box-sizing: border-box;
float: left;
}
#twitter span {
display: block;
border: 3px solid #1c68a5;
border-radius: 100%;
box-sizing: border-box;
-moz-box-sizing: border-box;
width: 7em;
height: 7em;
background: #3186ca;
color: #fff;
font-family:Arial, Helvetica, sans-serif;
font-size: 0.6em;
line-height: 1em;
font-weight: 700;
padding: 2.7em 0 0 0;
text-align: center;
margin: -1.4em 1em 0 0;
text-transform: uppercase;
float: left;
}
#twitter span:hover {
background: #fff !important;
color: #5d6365;
border: 3px solid #5d6365 !important;
cursor: pointer;
}



-------------------------------------
Google Plus
-------------------------------------
*/


#google li {
display: block;
width: 50%;
font-weight: 400;
margin-bottom: 1em;
overflow: hidden;
padding-top: 1.4em;
padding-right: 2em;
box-sizing: border-box;
-moz-box-sizing: border-box;
float: left;
}
#google span {
display: block;
border: 3px solid #c23a34;
border-radius: 100%;
box-sizing: border-box;
-moz-box-sizing: border-box;
width: 7em;
height: 7em;
background: #f05851;
color: #fff;
font-family:Arial, Helvetica, sans-serif;
font-size: 0.6em;
line-height: 1em;
font-weight: 700;
padding: 2.7em 0 0 0;
text-align: center;
margin: -1.4em 1em 0 0;
text-transform: uppercase;
float: left;
}
#google span:hover {
background: #fff !important;
color: #5d6365;
border: 3px solid #5d6365 !important;
cursor: pointer;
}

-------------------------------------
Techandall
-------------------------------------
*/


#tech li {
display: block;
width: 50%;
font-weight: 400;
margin-bottom: 1em;
overflow: hidden;
padding-top: 1.4em;
padding-right: 2em;
box-sizing: border-box;
-moz-box-sizing: border-box;
float: left;
}
#tech span {
display: block;
border: 3px solid #66ecbe;
border-radius: 100%;
box-sizing: border-box;
-moz-box-sizing: border-box;
width: 7em;
height: 7em;
background: #c0eede;
color: #406d5e;
font-family:Arial, Helvetica, sans-serif;
font-size: 0.6em;
line-height: 1em;
font-weight: 700;
padding: 2.7em 0 0 0;
text-align: center;
margin: -1.4em 1em 0 0;
text-transform: uppercase;
float: left;
}
#tech span:hover {
background: #fff !important;
color: #5d6365;
border: 3px solid #5d6365 !important;
cursor: pointer;
}

esta bueno Gracias por compartir

Gracias por compartir man!