Documentation & Tutorials. We have a great selection of tutorials to help you make the most of your theme.

Sweet CSS3 buttons

Mick in Tutorials on Jan 13, 2012

Amazing CSS3 buttons for your portal of choice and even for your custom theme.

-Create flexible CSS3 buttons to your SMF forum using any portal available.
1. Open a new HTML block, paste the code below.

2. Download the image below and upload it to your 'image' folder in your server.

-Edit the code below with the full path to the image.

**Compatible CSS3 browsers are, Safari, Chrome and FireFox 3+.





<style type="text/css"> 

#light {
background-color:#FFF;
padding:10px;
margin-top:20px;
}
li {
        list-style:none;
padding-top:10px;
padding-bottom:10px;
}
.button, .button:visited {
background: #222 url([url]http://www.path-to-image.com/images/overlay.png) repeat-x;
display: inline-block;
padding: 5px 10px 6px;
color: #fff;
text-decoration: none;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
border-bottom: 1px solid rgba(0,0,0,0.25);
position: relative;
cursor: pointer
}
.button:hover {
        background-color: #111;
        color: #fff;
 }
.button:active {
       top: 1px;
}
.small.button, .small.button:visited {
       font-size: 11px
}
.button, .button:visited, .medium.button, .medium.button:visited {
       font-size: 13px;
       font-weight: bold;
       line-height: 1;
       text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
}
.large.button, .large.button:visited {
      font-size: 14px;
      padding: 8px 14px 9px;
}  
.super.button, .super.button:visited {
      font-size: 34px;
      padding: 8px 14px 9px;
}
.pink.button, .magenta.button:visited {
      background-color: #e22092;
}
.pink.button:hover {
      background-color: #c81e82;
}
.green.button, .green.button:visited {
      background-color: #91bd09;
}
.green.button:hover {
      background-color: #749a02;
}
.red.button, .red.button:visited {
      background-color: #e62727;
}
.red.button:hover {
     background-color: #cf2525;
}
.orange.button, .orange.button:visited {
     background-color: #ff5c00;
}
.orange.button:hover {
     background-color: #d45500;
}
.blue.button, .blue.button:visited  {
    background-color: #2981e4;
}
.blue.button:hover {
     background-color: #2575cf;
}
.yellow.button, .yellow.button:visited {
    background-color: #ffb515;
}
.yellow.button:hover {
    background-color: #fc9200;
}
</style>

 <div id="light"> 
       <ul>
        <li><a class="super button pink">Pink Button</a>
        <a class="large button green">Green Button</a></li>
       <li> <a class="large button blue">Blue Button</a>
        <a class="large button red">Red Button</a></li>
        <li><a class="large button orange">Orange Button</a>
        <a class="large button yellow">Yellow Button</a></li>
        </ul>
 </div>

Reference: Pretty CSS3 buttons – Papermashup

Tagged with: css3 tut script button 


Mick

Mick G

idesignsmf.com

    

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.


4 Comments

Hi, this is good stuff thank you!

But i didn't understand how can i install this. What do you mean with Open a new HTML block ? is this buttons show with bbc codec on post ?

thanks
1

Hi, this is good stuff thank you!

But i didn't understand how can i install this. What do you mean with Open a new HTML block ? is this buttons show with bbc codec on post ?

thanks
If you use a portal, create a html block and then play with it. ;)
2

Very nice buttons! Thanks a lot! :)
3

Very nice buttons! Thanks a lot! :)
thank you. I'm cooking another tutorial that uses css3 and icons within the button.
4




Latest Discussions

Join the conversation

Our Most Popular Features