JavaFX Pagination button sizes and style

Question

I'm trying to make the JavaFX pagination control look like this:

This is my styling:

 .pagination .pagination-control .button, .pagination .toggle-button {
    -fx-background-color: -fx-paginator-button;
    -fx-border-color: -fx-colour-dark-grey;
}

.pagination .pagination-control .toggle-button:selected {   
    -fx-background-color: -fx-colour-purple;
}

.pagination .pagination-control .toggle-button:hover, .pagination .pagination-control .button:hover  {   
    -fx-background-color: -fx-bg-colour-grey;
}

.pagination .pagination-control .left-arrow, .right-arrow{
    -fx-background-color: -fx-font-colour-black;
}

.pagination .label {
  -fx-text-fill: -fx-font-colour-black;
}

This is the result:

There seems to be an issue with the background colour. when the button is selected its overflowing a little at the bottom and for the arrow buttons the background is not applied to the entire button (If you look very closely at the rightmost arrow button the background colour ends leaving a little white strip). Also how do I increase the size of the buttons(they are mush smaller than the image in reality)? I've tried setting the prefWidth and prefHeight like so with no results

.pagination .pagination-control .button, .pagination .toggle-button {
    -fx-background-color: -fx-paginator-button;
    -fx-border-color: -fx-colour-grey;
    -fx-pref-width: 15;
    -fx-pref-height: 15;
}

Answer 1

These selectors should do the basic job:

/* Remove spacing */
.pagination > .pagination-control > .control-box {
    -fx-spacing: 0;
}

/* You can control the actual button sizes here */
.pagination > .pagination-control > .control-box > .number-button,
.pagination > .pagination-control > .control-box > .bullet-button,
.pagination > .pagination-control > .control-box > .left-arrow-button,
.pagination > .pagination-control > .control-box > .right-arrow-button {
    -fx-background-insets: 0, 1;
    -fx-background-color: lightgray, #FAFAFA;
    -fx-min-width: 30;
    -fx-min-height: 30;
}

/* Colors on hover */
.pagination > .pagination-control > .control-box > .number-button:hover,
.pagination > .pagination-control > .control-box > .bullet-button:hover,
.pagination > .pagination-control > .control-box > .left-arrow-button:hover,
.pagination > .pagination-control > .control-box > .right-arrow-button:hover {
    -fx-background-insets: 0;
    -fx-background-color: lightgray;
}

/* Selected toggle color */
.pagination > .pagination-control > .control-box > .number-button:selected,
.pagination > .pagination-control > .control-box > .bullet-button:selected{
    -fx-background-insets: 0;
    -fx-background-color: #58379A;
    -fx-text-fill: white;
}

to have a result like:

All the buttons have a fixed size, the spacing is removed and the selected/hovered toggle button has the borderless color.

---

Additionally, if you want to control also the text size inside the buttons, you can update the following selector as:

/* Remove spacing and control font size */
.pagination > .pagination-control > .control-box {
    -fx-spacing: 0;
    -fx-font-size: 12;
}

Furthermore you can control also the text size of the page information like:

.pagination > .pagination-control {
    -fx-font-size: 8;
}

Or you can even hide it:

.pagination {
    -fx-page-information-visible: false;
}

to have a result of:

Answer 2

The problem is that the -fx-pref-width or height are not been applied cause they are handled by their parent layout ( at least I think so ) in order to force the changes you need to set the min width and height instead of preferred.

Here is my css :

.pagination > .pagination-control > .control-box > .number-button {
    -fx-min-width: 40;
    -fx-min-height: 30;
}

.pagination > .pagination-control > .control-box > .left-arrow-button {
    -fx-min-width: 40;
    -fx-min-height: 30;
}

.pagination > .pagination-control > .control-box > .right-arrow-button {
    -fx-min-width: 40;
    -fx-min-height: 30;
}

.pagination .pagination-control .toggle-button:selected {   
    -fx-background-color: purple;
}

.pagination .pagination-control .toggle-button:hover, .pagination .pagination-control .button:hover  {   
    -fx-background-color: grey;
}

Consider have a look at modena.css for more information.