PDA

View Full Version : Simple smart buttons



vortex32
07-13-2011, 07:22 AM
I hate to design buttons i defiantly like more drink a Beer with a friend.

CSS Buttons Everywhere was again not enough minimalistic as i wants.
And all free buttons are so ugly.

So here you get Simple Stupid Lazy Buttons

in html_output.php

Change This:

////
// The HTML form submit button wrapper function
// Outputs a button in the selected language
/* BOF Simple Stupid Lazy Buttons */
function tep_image_submit($image, $value = '-AltValue-', $parameters = '') {
global $language;
$css_submit = '<input type="submit" class="button" value="' . tep_output_string($value) . '" />';
return $css_submit;
}
/* EOF Simple Stupid Lazy Buttons */

////
// Output a function button in the selected language
// to enable standart buttons delite Ultimate buttons and activte this code below
/* BOF Simple Stupid Lazy Buttons */
function tep_image_button($class, $value = '-AltValue-', $parameters = '' ) {
global $language;
$width = round((strlen($value) * 5.8),0) + 38;
$image = '<div class="button"><span>' . tep_output_string($value) . '</span></div>';
return $image;
}
/* EOF Simple Stupid Lazy Buttons */


Then ad this in the CSS of your template:

/* Simple Stupid Lazy buttons */
/* I thinks this are nice and simple buttons*/
.button {
display: inline;
border: none;
color: #9F3;
cursor: pointer;
font-weight: normal;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
text-shadow: 1px 1px #666;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 10px;
font-family: Verdana, Geneva, sans-serif;
background-color: #060;
background-image: url(images/button.png);
background-repeat: repeat-x;
background-position: bottom;
}
.button:hover {
background-position: 0 -48px;
}
.button:active {
background-position: 0 top;
position: relative;
top: 1px;
padding: 6px 10px 4px;
}

But i got still a little error in the CSS


The png file is here (http://placebo.lu/oscmax_forum/button.rar)

http://placebo.lu/oscmax_forum/12.jpg initial

http://placebo.lu/oscmax_forum/13.jpg on mouse over

Active button moves 1px



Have fun

vortex32
07-13-2011, 07:39 AM
Herre is the OK CSS

/* Simple Stupid Lazy buttons */
/* I thinks this are nice and simple buttons*/
.button {
display:inline-block !important;
margin-bottom:10px;
display: inline;
border: none;
color: #9F3;
cursor: pointer;
font-weight: normal;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
text-shadow: 1px 1px #666;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 10px;
font-family: Verdana, Geneva, sans-serif;
background-color: #060;
background-image: url(images/button.png);
background-repeat: repeat-x;
background-position: bottom;
margin-top: 10px;
}
.button:hover {
background-position: 0 -48px;
}
.button:active {
background-position: 0 top;
position: relative;
top: 1px;
padding: 6px 10px 4px;
}