Borderless Button with Background-Image

Hallo!
I want to create a Borderless Button with a background - image. Furthermore i want to place the caption of the button in the center of the image.

Actually i do this:

.borderlessButton .v-button {
background: transparent;
border: none;
background-image: url(images/logo.png);
}

Button myButton = new Button(“caption”);
myButton.setStylleName(“borderlessButton”);

But this doesn’t work. The Button looks like the standard Button with reindeer-style. Not the whole border is transparent, only the left-border doesn’t appears.

Greetz,
Michel

Hi,

You might find it easier to style the NativeButton (just swap your Button to NativeButton):


Java:
Button b = new NativeButton("Do stuff");
b.setStyleName("borderless");

CSS:
.v-nativebutton-borderless {
	border: none;
	background: transparent url(http://dev.vaadin.com/chrome/site/vaadin-trac.png) no-repeat;
	width: 342px;
	height: 60px;
}

Best Regards,
Marc

Hi. Thanks. That made it.

This CSS stuff is killing me …

Maybe you can help?

  1. How can I set the background image for the “pressed” state within a newly defined style? (in my example “speed”, see sample code below). For “hover” I make it work.

  2. How can I get rid of the annoying outline, if the button is focused? Just setting outline to none does not work for me.

  3. And what about line wrapping within the button caption ;-). Any idea?

Thanks a lot!!
Dirk


        Button b = new NativeButton("Do it! Yes we can. Make it so.");
        b.setStyleName("speed");

@import "../chameleon/styles.css";

.v-nativebutton-speed,
.v-nativebutton-speed:active,
.v-nativebutton-speed:focus {
    [b]
outline: none;
[/b]
    border: none;
    background: transparent url(img/bg-button-circle-grey-3.png) no-repeat;
    width: 96px;
    height: 96px;
}	
.v-nativebutton-speed:hover {
    background: transparent url(img/bg-button-circle-red-2.png) no-repeat;
}
.v-nativebutton-speed .v-nativebutton-caption {
	font-size: 12px;
}

Just define the :active style, like :hover

.v-nativebutton-speed:active {
    background: transparent url(img/bg-button-circle-red-3.png) no-repeat;
}

In what browser? I suspect Firefox. You must use the Firefox specific selector to remove it:

.v-nativebutton::-moz-focus-inner {
    border: none;
    padding: 0;
}
.v-nativebutton .v-nativebutton-caption {
    white-space: normal;
}

That should do it.

Yes it is firefox issue.

I tried following:


.my-class.v-button-link.v-button:focus .v-button-caption, .my-class.v-button-link.v-button::-moz-focus-inner .v-button-caption,
.my-class.v-button-link.v-button:focus , .my-class.v-button-link.v-button::-moz-focus-inner
	{
	border: 0px;
	outline: none;
}

It doesn’t work. How can I even evaluate it? The firebug seems to not display such things.