Sweet CSS3 buttons

Written by Mick in Tutorials on 13 Jan 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

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.
    
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
Quote from: Skaty on 04 Dec 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
Very nice buttons! Thanks a lot! :)
#3
Quote from: Dylert on 31 Aug 2013
Very nice buttons! Thanks a lot! :)
thank you. I'm cooking another tutorial that uses css3 and icons within the button.
#4

Get more stuff like this

Subscribe to our mailing list and get interesting content and updates.