Contribute to the development of SMF. Follow the coding discussions taking place on >> Github.

Creating Metro style buttons

Mick in Tutorials
May 02, 2013


Today i was messing with photoshop and a cool idea popped in my head. Why not create some metro styled buttons with transitions and animation to navigate your forum using SimplePortal HTML blocks top or bottom.

Nothing fancy but sure will call users attention.

Demo: Metro Blocks

Download the ZIP below and upload the images to the image folder. Make sure the URL to the images are correct in the code.

Create a HTML block Top or Bottom and add the following:
Code: [Select]
	<ul class="portfolio-grid">
<li>
<a href="#" class="animated flipInX">
<img src="../images/1.png" alt="img01"/>
</a>
</li>
<li>
<a href="#" class="animated flipInX">
<img src="../images/2.png" alt="img01"/>
</a>
</li>
<li>
<a href="#" class="animated flipInX">
<img src="../images/3.png" alt="img01"/>
</a>
</li>
<li>
<a href="#" class="animated flipInX">
<img src="../images/4.png" alt="img01"/>
</a>
</li>
<li>
<a href="#" class="animated flipInX">
<img src="../images/5.png" alt="img01"/>
</a>
</li>
<li>
<a href="#" class="animated flipInX">
<img src="../images/6.png" alt="img01"/>
</a>
</li>
<li>
<a href="#" class="animated flipInX">
<img src="../images/7.png" alt="img01"/>
</a>
</li>
<li>
<a href="#" class="animated flipInX">
<img src="../images/8.png" alt="img01"/>
</a>
</li>
<li>
<a href="#" class="animated flipInX">
<img src="../images/9.png" alt="img01"/>
</a>
</li>
<li>
<a href="#" class="animated flipInX">
<img src="../images/10.png" alt="img01"/>
</a>
</li>
</ul>

In your ccs.index file add this at the very bottom:
Code: [Select]
.portfolio-grid {
list-style: none;
padding: 0;
margin: 0 auto;
text-align: center;
width: 100%;
}
.portfolio-grid li {
display: inline-block;
margin: 5px 5px 5px 5px;
vertical-align: top;
        width:212px;
}
.portfolio-grid li > a,
.portfolio-grid li > a img {
        width: 100%;
border: none;
outline: none;
display: block;
position: relative;
        transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -webkit-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
}
.portfolio-grid li > a img:hover {
        border-radius: 50%;
        z-index: 9999;
}

.animated{-webkit-animation-duration:1s;-moz-animation-duration:1s;-o-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both;}
@-webkit-keyframes flipInX {
    0% {
        -webkit-transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
   
    40% {
        -webkit-transform: perspective(400px) rotateX(-10deg);
    }
   
    70% {
        -webkit-transform: perspective(400px) rotateX(10deg);
    }
   
    100% {
        -webkit-transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}
@-moz-keyframes flipInX {
    0% {
        -moz-transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
   
    40% {
        -moz-transform: perspective(400px) rotateX(-10deg);
    }
   
    70% {
        -moz-transform: perspective(400px) rotateX(10deg);
    }
   
    100% {
        -moz-transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}
@-o-keyframes flipInX {
    0% {
        -o-transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
   
    40% {
        -o-transform: perspective(400px) rotateX(-10deg);
    }
   
    70% {
        -o-transform: perspective(400px) rotateX(10deg);
    }
   
    100% {
        -o-transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}
@keyframes flipInX {
    0% {
        transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
   
    40% {
        transform: perspective(400px) rotateX(-10deg);
    }
   
    70% {
        transform: perspective(400px) rotateX(10deg);
    }
   
    100% {
        transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}

.flipInX {
-webkit-backface-visibility: visible !important;
-webkit-animation-name: flipInX;
-moz-backface-visibility: visible !important;
-moz-animation-name: flipInX;
-o-backface-visibility: visible !important;
-o-animation-name: flipInX;
backface-visibility: visible !important;
animation-name: flipInX;
}

Have fun!

Icons used by IcoMoon App - Icon Font Generator

Tagged with: metro buttons css smf block simpleportal 

Share This Post

Mick

Mick is an American theme designer for Simple Machines Forum software currently living in South Florida, USA. He runs idesignSMF and started tinkering with SMF in 2006 where he created several SMF forums of his own before he founded idesignSMF in 2009 to which he is dedicated full time and has a weakness for Tacos and Pizza.

    


6 Comments

cieplutki
May 02, 2013
Nice but not working well

look my poligon
1

Mick
May 02, 2013
Nice but not working well

look my poligon

Thanx.  Did you added the css code in your block or in the css index?
2

cieplutki
May 02, 2013
up ... all work well - it's my fault, on PortaMx 1.51 I should use script block
3

Mick
May 02, 2013
up ... all work well - it's my fault, on PortaMx 1.51 I should use script block

Awesome. Glad it worked. I didnt know PortaMx uses 'script' as other portals use 'html'.  I just learned something new ;)
4

cieplutki
May 02, 2013
suggestion to optimize:
Code: [Select]
<li>
                        <a href="#" class="animated flipInX">
                            <img src="../images/1.png" alt="img01"/>
                        </a>
                    </li>

replase like this:
Code: [Select]
<li>
                        <a target="_blank" href="#" class="animated flipInX">
                            <img src="../images/1.png" title="YOUR_TITLE" alt="YOUR_TITLE"/>
                        </a>
                    </li>

open in new tab  :cool:
5

Mick
May 02, 2013
Awesome! Thanx!
6



Connect with us:


Improve SMF

If you wish to contribute to the development of SMF you can contribute to the coding discussions taking place on Github. You are also welcome to suggest features which you would like to see added to the software in the Feature Requests board.




go up