How to Create Rollover Web Buttons in CorelDRAW

Creating rollover web buttons in CorelDRAW allows you to design interactive graphical elements that visually respond when a user hovers over or clicks them on a webpage. By utilizing CorelDRAW's native rollover and internet tools, you can define three distinct visual states—Normal, Over, and Down—assign interactive hyperlinks, and export the finished graphics for web deployment without needing complex web development software.

Step 1: Design the Base Button Graphic

  1. Select the Rectangle tool (F6) or Ellipse tool (F7) and draw the shape for your button.
  2. Apply your desired fill color, outline, and effects such as drop shadows, bevels, or gradients.
  3. Use the Text tool (F8) to add a label (e.g., "Submit" or "Click Here") over the shape.
  4. Select both the shape and the text, then press Ctrl + G to group them into a single object.

Step 2: Convert the Graphic to a Rollover Object

  1. Select the grouped button graphic.
  2. Go to the top menu and select Effects > Rollover > Create Rollover (in older versions, this can also be accessed via Window > Toolbars > Internet to open the Internet toolbar).
  3. The selected group is now an interactive rollover object containing three editable states: Normal, Over, and Down.

Step 3: Edit the Rollover States

  1. Right-click the button and select Edit Rollover, or click the Edit Rollover button on the active Rollover property bar.
  2. The property bar will now display a state selector with three options:
    • Normal: The default appearance when the cursor is away from the button. Leave this as your base design.
    • Over: The appearance when the user hovers the cursor over the button. Select Over from the dropdown, then select the button background and change its color, outline, or text color to indicate a hover state.
    • Down: The appearance when the user clicks the button. Select Down from the dropdown, then darken the color or adjust the position slightly to simulate a physical button press.
  3. Once all three states are customized, click the Finish Editing Rollover button on the property bar.
  1. Select the rollover button.
  2. Open the Object Properties docker (Window > Dockers > Properties).
  3. Navigate to the Internet tab within the docker.
  4. In the URL field, enter the destination web address (e.g., https://www.example.com).
  5. Choose a target frame (such as _blank for a new tab or _self for the current window) if necessary.

Step 5: Test and Export

  1. To preview the interactive behavior within CorelDRAW, click the Live Preview icon on the Rollover toolbar and hover over or click your button. Turn off live preview when finished.
  2. Go to File > Export for > Web (or File > Export).
  3. Choose your preferred web format (such as PNG or GIF) to preserve transparency and optimize color output.
  4. Export the files and the corresponding HTML code to integrate the button into your web project.