Sharepoint 2013 Styling Animated Metro Buttons

Styling your own Metro Buttons in SharePoint 2013

MetroButtons

I have managed to create Metro Style buttons for SharePoint 2013 navigating. I have a SP solution that manages the Expense Reports of a company. They wanted easy buttons to allow users to select a Expense Report Template of their country and start editing the InfoPath template. “It would be great if they were animated” they said.

After a couple of hours I created the buttons you can see above. I ended up creating a Script Editor WebPart containing following code:

CSS part

<style type=”text/css”>
#Tile_WPQ2_1_4{
transition: all 0.2s ease-iout;
-webkit-transition: all 0.2s ease-out; /** Chrome & Safari **/
-moz-transition: all 0.2s ease-out; /** Firefox **/
-o-transition: all 0.2s ease-out; /** Opera **/
}
#Tile_WPQ2_1_2 a:hover #Tile_WPQ2_1_4{
transform: translate(0,-50px);
-webkit-transform: translate(0,-50px);
-o-transform: translate(0,-50px);
-moz-transform: translate(0,-50px);
}

</style>

HTML part

<div id=”WPQ2-GettingStarted” class=”ms-promlink-root”>
<div id=”Tile_WPQ2_1_2″ aria-haspopup=”true” class=”ms-tileview-tile-content” style=”margin-right: 5px; margin-top:5px; width: 150px; height: 150px; float: left; background-color: #902e3b;”> ??
<a id=”Tile_WPQ2_1_3″ href=”/sites/Templates/_layouts/15/FormServer.aspx?XsnLocation=http%3a//yourSite/sites/Templates/ExpenseBe.xsn&amp;SaveLocation=http%3a//yourSite/sites/Templates/Report&amp;ClientInstalled=true&amp;DefaultItemOpen=1&amp;Source=http%3a//yourSite/sites/Templates”>
<span style=”height: 150px; width: 150px; display: inline-block;overflow: hidden; “>
<img src=”/sites/Templates/SiteAssets/SitePages/Home/text3800.png” alt=”Expense Report” style=”left: -300px; top: -150px; width: 50px; height: 50px; padding-left: 10px;”/> ?</span>
<div id=”Tile_WPQ2_1_4″ class=”ms-tileview-tile-detailsBox” style=”width: 150px; height: 150px; top: 100px; left: 0px;”>
<ul class=”ms-noList ms-tileview-tile-detailsListMedium”>
<li id=”Tile_WPQ2_1_5″ class=”ms-tileview-tile-titleMedium ms-tileview-tile-titleMediumCollapsed”>?
<div class=”ms-tileview-tile-titleTextMediumCollapsed”>Expense Report??
<span class=”ms-rteThemeForeColor-2-2″>BE NL</span></div>
</li>
<li title=”Expense Report” id=”Tile_WPQ2_1_6″ class=”ms-tileview-tile-descriptionMedium”>Add New</li>
</ul>
</div> </a> </div>

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s