Borderless Button with Background-Image

[Michel1 (Michel Klein)]

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

[Marc (Marc Englund)]

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

[Michel1 (Michel Klein)]

Hi. Thanks. That made it.

[Dirk (Dirk Weigand)]

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;
}

[Jouni1 (Jouni Koivuviita)]

@Dirk Weigand

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.

Just define the :active style, like :hover

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

@Dirk Weigand

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.

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;
}

@Dirk Weigand

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

.v-nativebutton .v-nativebutton-caption {
    white-space: normal;
}

That should do it.

[Matus (Matúš Ferko)]

Dirk Weigand:
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.

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;
}

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.