JavaFX: Removing CSS effects to a Button

This entry is part 23 of 55 in the series JavaFX

When a mouse is moved over a button, we can apply an effect such as changing the color of the button.

However, when the mouse is out of the button or out of any other nodes, we will want it to get back to its original state.

We can use remove() method if we have only one class or removeAll() method if we have more than one CSS class.

package javafxapplication19;

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.effect.DropShadow;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;

public class JavaFXApplication19 extends Application {

    Button btn = new Button("Codecrawl");

    DropShadow ds = new DropShadow();

    public void start(Stage stage) {

        stage.setTitle("JavaFX Program!");

        StackPane stackpane = new StackPane();

        Scene scene = new Scene(stackpane, 300, 250);

        btn.setOnMouseEntered(e -> mouseEntered());

        btn.setOnMouseExited(e -> mouseExited());


    public void mouseEntered() {

        btn.setText("Mouse In");


    public void mouseExited() {

        btn.setText("Mouse Out");


    public static void main(String[] args) {



Here is the simple style.css that we use to set the color of the button.

.button1 {
    -fx-base: blue;