How do I put the names of the buttons below the images?

Flow
1

I welcome!

if for button’s i use
.setStyleName(BaseTheme.BUTTON_LINK);
 as a place name under the image?


...
        Button helpButton = new Button(CAPTIONHELP);
        helpButton.setIcon(new ThemeResource(Theme.help32x32));
        helpButton.setStyleName(BaseTheme.BUTTON_LINK);        
        helpButton.setDescription(TOOLTIPHELP);
        
        Button aboutSysButton = new Button(CAPTIONABOUTSYS);
        aboutSysButton.setIcon(new ThemeResource(Theme.document32x32));
        aboutSysButton.setStyleName(BaseTheme.BUTTON_LINK);        
        aboutSysButton.setDescription(TOOLTIPABOUTSYS);
        
        Button reviewSysButton = new Button(CAPTIONREVIEWSYS);
        reviewSysButton.setIcon(new ThemeResource(Theme.folder32x32));
        reviewSysButton.setStyleName(BaseTheme.BUTTON_LINK);        
        reviewSysButton.setDescription(TOOLTIPREVIEWSYS);
        
        Button mailSysButton = new Button(CAPTIONFEEDBACK);
        mailSysButton.setIcon(new ThemeResource(Theme.email32x32));
        mailSysButton.setStyleName(BaseTheme.BUTTON_LINK);        
        mailSysButton.setDescription(TOOLTIPFEEDBACK);

...

I would be grateful for the information!
12140.png

2

I think I’ve figured out -

this Java code -


...
        HorizontalLayout hLayoutBtnLgn = new HorizontalLayout();
        hLayoutBtnLgn.setStyleName("v-horizontallayout-logonbtn-line");
        hLayoutBtnLgn.setWidth("100%");
        hLayoutBtnLgn.setMargin(true);
        hLayoutBtnLgn.setSpacing(false);
...

…and css -


...
.v-horizontallayout-logonbtn-line {
	  background-color: #4172AE;	  
}

.v-horizontallayout-logonbtn-line .v-button-link {
      display: block;
      background: transparent;
      border: none;
      text-align: center;
}

.v-horizontallayout-logonbtn-line .v-button-link .v-button-caption {
	color: #fff; 
	font-weight:bold;
	text-decoration: none;
}

.v-horizontallayout-logonbtn-line .v-button-link .v-button-caption:hover {
	color: #39849d; 
	text-decoration: underline;
}

.v-horizontallayout-logonbtn-line .v-button {
      display: block;
      background: transparent;
      border: none;
      text-align: center;
}
 
.v-horizontallayout-logonbtn-line .v-button img {
      display: block;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 5px;
}

.v-horizontallayout-logonbtn-line .v-button span {
      /*font-size: x-small;*/
      text-shadow: #fafafa 1px 1px 0;
}

...

12145.png