You need to add another div inside then position two images as backgrounds. One image should be wider than the text. The other image should be shorter. You would position one image to left and the other to right. Google css sliding doors There are a ton of tuts online.
do you have an idea how the div needs to look like and how to put 2 images into the CSS of the dafault CSS-code ?
Many thanks,
looks like this is not possible just by changing the CSS-code ?
the <span> tag is missing within HTML…..
<span>Submit</span>
How is BuddyPress defining the width of a button ?
hmmm…. I am thinking of dis-abling the buttom-CSS-styles totally.
So that the buttons look like a very simple button like the Submit-button at Google.com
I have tried to disable all default button-CSS, but still not getting the same simple button as at Google.
Do you know which CSS-items I need to disable in order to make just a simple button ?
Many thanks,
in CSS, look for
button-nav
and
generic-button
those are the basic styles for the buttons.
as previously mentioned, your original idea employs the use of something called “sliding doors”. if you’ve never done it before, you might want to start here:
http://www.alistapart.com/articles/slidingdoors/
thanks ruthless,
I do know where to find the CSS-code, but I have changed the code to “none” for each element.
I still do not get the result of having just a simple button like it is for example here at buddypress.org or at Google.com
I just want to get rid of all the default button-CSS, just having a simple button without CSS.
default:
a.button, input[type=submit], input[type=button],
ul.button-nav li a, div.generic-button a {
background: url( ../images/white-grad.png ) top left repeat-x;
border: 1px solid #ddd;
padding: 3px 10px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
text-decoration: none;
color: #888;
font-size: 12px;
font-weight: normal;
vertical-align: bottom;
cursor: pointer;
}
changed all elements to NONE:
a.button, input[type=submit], input[type=button],
ul.button-nav li a, div.generic-button a {
background: none;
border: none;
padding: 3px 10px;
-moz-border-radius: none;
-webkit-border-radius: none;
border-radius: none;
text-decoration: none;
color: #888;
font-size: 12px;
font-weight: normal;
vertical-align: bottom;
cursor: pointer;
}
