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

Sweet CSS3 buttons

Mick in Tutorials
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+.




Code: [Select]
<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 

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.

    


4 Comments

Skaty
Dec 04, 2012
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

Mick
Dec 04, 2012
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

Dylert
Aug 31, 2013
Very nice buttons! Thanks a lot! :)
3

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



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