Edge effect of a Jbutton component

Question

How do I create a smooth transition(Fade Effect) from the edge of a Jbutton by hovering the mouse?

My code is like this:

@Override
public void mouseEntered(MouseEvent e) {
    Object temp = e.getSource();
    if (temp instanceof JButton)
        ((JButton)temp).setBorder(new LineBorder(Color.WHITE, 1, false);
    /* restante do código */
}

@Override
public void mouseExited(MouseEvent e) {
    Object temp = e.getSource();
    if (temp instanceof JButton)
       ((JButton)temp).setBorder(null);
    /* restante do código */
}

How do I get this kind of result? I searched some forums and articles, but nothing that dealt with this detail.

Answer 1

I believe you’re looking for something along these lines:

package br;

import java.awt.AlphaComposite;
import java.awt.Color;
import java.awt.FlowLayout;
import javax.swing.*;
import javax.swing.JButton;
import javax.swing.JFrame;

public class CriarJButton extends JFrame {

    private static final long serialVersionUID = 1L;

    public CriarJButton() {
        this.getContentPane().setLayout(new FlowLayout());
        final botaoFade bt = new botaoFade("StackOverflow.pt");
        bt.addMouseListener(new java.awt.event.MouseAdapter() {
            public void mouseEntered(java.awt.event.MouseEvent evt) {
               bt.setAlpha((float)0.6);
            }
            public void mouseExited(java.awt.event.MouseEvent evt) {
                bt.setAlpha((float)1);
            }
        });
        add(bt);

    }

    private static void cria_MostraInterface() {

        JFrame painel = new CriarJButton();
        painel.pack();
        painel.setVisible(true);
        painel.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    }

    public static void main(String[] args) {
        javax.swing.SwingUtilities.invokeLater(new Runnable() {
            public void run() {
                cria_MostraInterface();
            }
        });
    }

    private static class botaoFade extends JButton {

        private static final JButton lafDeterminer = new JButton();
        private static final long serialVersionUID = 1L;
        private boolean rectangularLAF;
        private float alpha = 1f;

        botaoFade() {
            this(null, null);
        }

        botaoFade(String texto) {
            this(texto, null);
        }

        botaoFade(String texto, Icon icon) {
            super(texto, icon);
            setOpaque(false);
            setFocusPainted(false);
        }

        public float getAlpha() {
            return alpha;
        }

        public void setAlpha(float alpha) {
            this.alpha = alpha;
            repaint();
        }

        @Override
        public void paintComponent(java.awt.Graphics g) {
            java.awt.Graphics2D g2 = (java.awt.Graphics2D) g;
            g2.setComposite(AlphaComposite.getInstance(AlphaComposite.SRC_OVER, alpha));
            if (rectangularLAF && isBackgroundSet()) {
                Color c = getBackground();
                g2.setColor(c);
                g.fillRect(0, 0, getWidth(), getHeight());
            }
            super.paintComponent(g2);
        }

        @Override
        public void updateUI() {
            super.updateUI();
            lafDeterminer.updateUI();
            rectangularLAF = lafDeterminer.isOpaque();
        }
    }
}

I chose to modify the whole button, but if you want to apply only on the edge, it won’t be so difficult.

If you want, you can download the code on gist.