And this is good! It is an easy way to make a boring SharePoint site look, well, webby.
Creating buttons isn't difficult within itself, except for the arduous task of creating two images per button if a hover is required. The difficult bit lies in resizing, colour or renaming these buttons. Naturally end user's needs change on their sites and so it becomes a bit of a support overhead to constantly be creating buttons.
So i came up with this neat little bit of code which is pure css buttons, colours hovers, text, the lot.
Now it may look a little daunting, but the principle is simple really - a table construct which can be changed to allow for any format of button config, it is here the button names appear as simple href's. This is then followed by css classes, initially applying the main details of the buttons like size, font, alignment and then classes which are hooks for each button, for colour. The following code should be fairly simple to work out.
So, how do we go about applying this? Well, its much better to separate out the code from a content editor webpart so we can control and modify just the txt file rather than editing the site again.
I usually put the following code into a txt file called spbuttons.txt and place it into the site assets library on the local site. Then simply reference this in the content link config of the CEWP, now if you make this relative (../siteassets/) you could export this webpart and place it in the gallery, then all you have to do is copy the txt file into the correct location and straight away you have some buttons on the user's site.
Then your able to modify the text file in its location (I usually open the library with explorer and exit the file straight from SharePoint in Notepad++) and as soon as you save and refresh your result appear immediately.
URL's will need adding into the href on the buttons, give the buttons some names and if you want or need to, change the colours in the css to suit your need. Note this has also got some CSS3 elements here to make the transitions nicer, but it is compatible also is older browsers, just not as sweet.
Copying the following code and adding as ive described to a CEWP gives the following results:
Hope this saves alot of you alot of time! :)
<table class="spbuttable">
<tr>
<td>
<a href="#" class="spcssbuttonconstruct spcssbutton1" title="Button 1 Title">Button 1</a>
</td>
<td>
<a href="#" class="spcssbuttonconstruct spcssbutton2" title="Button 2 Title">Button 2</a>
</td>
<td>
<a href="#" class="spcssbuttonconstruct spcssbutton3" title="Button 3 Title">Button 3</a>
</td>
<td>
<a href="#" class="spcssbuttonconstruct spcssbutton4" title="Button 4 Title">Button 4</a>
</td>
</tr>
<tr>
<td>
<a href="#" class="spcssbuttonconstruct spcssbutton5" title="Button 5 Title">Button 5</a>
</td>
<td>
<a href="#" class="spcssbuttonconstruct spcssbutton6" title="Button 6 Title">Button 6</a>
</td>
<td>
<a href="#" class="spcssbuttonconstruct spcssbutton7" title="Button 7 Title">Button 7</a>
</td>
<td>
<a href="#" class="spcssbuttonconstruct spcssbutton8" title="Button 8 Title">Button 8</a>
</td>
</tr>
<tr>
<td>
<a href="#" class="spcssbuttonconstruct spcssbutton9" title="Button 9 Title">Button 9</a>
</td>
<td>
<a href="#" class="spcssbuttonconstruct spcssbutton10" title="Button 10 Title">Button 10</a>
</td>
<td>
<a href="#" class="spcssbuttonconstruct spcssbutton11" title="Button 11 Title">Button 11</a>
</td>
<td>
<a href="#" class="spcssbuttonconstruct spcssbutton12" title="Button 12 Title">Button 12</a>
</td>
</tr>
</table>
<style type="text/css">
.spcssbuttonconstruct {
background-color:black;
color:white !important;
display:inline-block;
font-family: "wf_SegoeUILight","wf_SegoeUI","Segoe UI Light","Segoe WP Light","Segoe UI","Segoe","Segoe WP","Tahoma","Verdana","Arial","sans-serif";
font-style:normal;
text-decoration:none !important;
text-align:center;
vertical-align: middle;
display: table-cell;
font-weight: 500;
font-size:20px;
line-height: 25px;
height:100px;
width:165px;
}
.spcssbuttonconstruct:hover {
background-color:white;
-webkit-transition: ease-in 0.3s;
-moz-transition: ease-in 0.3s;
-o-transition: ease-in 0.3s;
-ms-transition: ease-in 0.3s;
transition: ease-in 0.3s;
}
.spcssbutton1 {
background-color:#3cb0e0;
-webkit-transition: ease-in 0.3s;
-moz-transition: ease-in 0.3s;
-o-transition: ease-in 0.3s;
-ms-transition: ease-in 0.3s;
transition: ease-in 0.3s;
}
.spcssbutton1:hover {
color:#3cb0e0 !important;
-webkit-transition: ease-in 0.3s;
-moz-transition: ease-in 0.3s;
-o-transition: ease-in 0.3s;
-ms-transition: ease-in 0.3s;
transition: ease-in 0.3s;
}
.spcssbutton2 {
background-color:#008e7f;
-webkit-transition: ease-in 0.3s;
-moz-transition: ease-in 0.3s;
-o-transition: ease-in 0.3s;
-ms-transition: ease-in 0.3s;
transition: ease-in 0.3s;
}
.spcssbutton2:hover {
color:#008e7f !important;
-webkit-transition: ease-in 0.3s;
-moz-transition: ease-in 0.3s;
-o-transition: ease-in 0.3s;
-ms-transition: ease-in 0.3s;
transition: ease-in 0.3s;
}
.spcssbutton3 {
background-color:#939392;
-webkit-transition: ease-in 0.3s;
-moz-transition: ease-in 0.3s;
-o-transition: ease-in 0.3s;
-ms-transition: ease-in 0.3s;
transition: ease-in 0.3s;
}
.spcssbutton3:hover {
color:#939392 !important;
-webkit-transition: ease-in 0.3s;
-moz-transition: ease-in 0.3s;
-o-transition: ease-in 0.3s;
-ms-transition: ease-in 0.3s;
transition: ease-in 0.3s;
}
.spcssbutton4 {
background-color:#003c27;
-webkit-transition: ease-in 0.3s;
-moz-transition: ease-in 0.3s;
-o-transition: ease-in 0.3s;
-ms-transition: ease-in 0.3s;
transition: ease-in 0.3s;
}
.spcssbutton4:hover {
color:#003c27 !important;
-webkit-transition: ease-in 0.3s;
-moz-transition: ease-in 0.3s;
-o-transition: ease-in 0.3s;
-ms-transition: ease-in 0.3s;
transition: ease-in 0.3s;
}
.spcssbutton5 {
background-color:#edd845;
-webkit-transition: ease-in 0.3s;
-moz-transition: ease-in 0.3s;
-o-transition: ease-in 0.3s;
-ms-transition: ease-in 0.3s;
transition: ease-in 0.3s;
}
.spcssbutton5:hover {
color:#edd845 !important;
-webkit-transition: ease-in 0.3s;
-moz-transition: ease-in 0.3s;
-o-transition: ease-in 0.3s;
-ms-transition: ease-in 0.3s;
transition: ease-in 0.3s;
}
.spcssbutton6 {
background-color:#e784b7;
-webkit-transition: ease-in 0.3s;
-moz-transition: ease-in 0.3s;
-o-transition: ease-in 0.3s;
-ms-transition: ease-in 0.3s;
transition: ease-in 0.3s;
}
.spcssbutton6:hover {
color:#e784b7 !important;
-webkit-transition: ease-in 0.3s;
-moz-transition: ease-in 0.3s;
-o-transition: ease-in 0.3s;
-ms-transition: ease-in 0.3s;
transition: ease-in 0.3s;
}
.spcssbutton7 {
background-color:#6cb33f;
-webkit-transition: ease-in 0.3s;
-moz-transition: ease-in 0.3s;
-o-transition: ease-in 0.3s;
-ms-transition: ease-in 0.3s;
transition: ease-in 0.3s;
}
.spcssbutton7:hover {
color:#6cb33f !important;
-webkit-transition: ease-in 0.3s;
-moz-transition: ease-in 0.3s;
-o-transition: ease-in 0.3s;
-ms-transition: ease-in 0.3s;
transition: ease-in 0.3s;
}
.spcssbutton8 {
background-color:#e6c26a;
-webkit-transition: ease-in 0.3s;
-moz-transition: ease-in 0.3s;
-o-transition: ease-in 0.3s;
-ms-transition: ease-in 0.3s;
transition: ease-in 0.3s;
}
.spcssbutton8:hover {
color:#e6c26a !important;
-webkit-transition: ease-in 0.3s;
-moz-transition: ease-in 0.3s;
-o-transition: ease-in 0.3s;
-ms-transition: ease-in 0.3s;
transition: ease-in 0.3s;
}
.spcssbutton9 {
background-color:#84be51;
-webkit-transition: ease-in 0.3s;
-moz-transition: ease-in 0.3s;
-o-transition: ease-in 0.3s;
-ms-transition: ease-in 0.3s;
transition: ease-in 0.3s;
}
.spcssbutton9:hover {
color:#84be51 !important;
-webkit-transition: ease-in 0.3s;
-moz-transition: ease-in 0.3s;
-o-transition: ease-in 0.3s;
-ms-transition: ease-in 0.3s;
transition: ease-in 0.3s;
}
.spcssbutton10 {
background-color:#3c90b3;
-webkit-transition: ease-in 0.3s;
-moz-transition: ease-in 0.3s;
-o-transition: ease-in 0.3s;
-ms-transition: ease-in 0.3s;
transition: ease-in 0.3s;
}
.spcssbutton10:hover {
color:#3c90b3 !important;
-webkit-transition: ease-in 0.3s;
-moz-transition: ease-in 0.3s;
-o-transition: ease-in 0.3s;
-ms-transition: ease-in 0.3s;
transition: ease-in 0.3s;
}
.spcssbutton11 {
background-color:#525451;
-webkit-transition: ease-in 0.3s;
-moz-transition: ease-in 0.3s;
-o-transition: ease-in 0.3s;
-ms-transition: ease-in 0.3s;
transition: ease-in 0.3s;
}
.spcssbutton11:hover {
color:#525451 !important;
-webkit-transition: ease-in 0.3s;
-moz-transition: ease-in 0.3s;
-o-transition: ease-in 0.3s;
-ms-transition: ease-in 0.3s;
transition: ease-in 0.3s;
}
.spcssbutton12 {
background-color:#78669b;
-webkit-transition: ease-in 0.3s;
-moz-transition: ease-in 0.3s;
-o-transition: ease-in 0.3s;
-ms-transition: ease-in 0.3s;
transition: ease-in 0.3s;
}
.spcssbutton12:hover {
color:#78669b !important;
-webkit-transition: ease-in 0.3s;
-moz-transition: ease-in 0.3s;
-o-transition: ease-in 0.3s;
-ms-transition: ease-in 0.3s;
transition: ease-in 0.3s;
}
.spbuttable {
width: 646px;
border-spacing: 1px;
margin-left:auto;
margin-right:auto;
margin-bottom:10px;
}
</style>
This is fantastic. Great post.
ReplyDeleteFabulous! You saved me ALOT of work!
ReplyDeleteThis is Awesome, Your are a Genius :) KUDOS!!
ReplyDelete