Skip to content

How To Change Systeme io Button Hover Color?

    Systeme io Questions and Answers (FAQ)
    < All Topics

    Currently, there is no option to change text or button hover color. However, there is a workaround by leveraging the CSS. (yes, you can add custom HMTL/CSS/JS code under the settings of your funnel)

    button hover color

    If you would like to keep it simple without using CSS, one tip is to avoid using the darker button color so that the text remains visible when mouseover.

    Having said that, this is NOT a critical feature, so don’t be too concerned about it as the Systeme io team is continuously working on the improvement. Focus on another important area of your business, especially those related to traffic and conversion. But if you don’t mind doing a little bit of copy and pasting, follow the steps below to change the button hover color.

    Use CSS to create a button hover color

    1. Get the HEX (eg, #a8763e) of your desired color. You may use color-hex.

    2. Copy your button ID attribute and paste it into notepad. To see the ID attribute for the button, you have first to select the button, and that will show the button properties on the left. Scroll to the bottom to see the ID attribute.

    button id attribute

    3. Next, add the Raw HTML element. Drag the Raw HTML and drop it on the canvas.

    insert raw html

    4. Click on the Raw HTML element on the canvas, and on the left, click on Edit code

    Edit code Systeme io

    5. Insert the following code in the HTML code area. Replace the button ID attribute with the button ID attribute you copied earlier. Change the button background/border color with your desired color.

    #button-949c0016:hover {
      background-color: #2EFF2E; /* Green */
      border: 2px solid #2EFF2E;
      color: white;
      text-decoration: none;
      display: inline-block;
      transition-duration: 0.4s;
      cursor: pointer;
    css code button hover

    6. Save the changes.

    Like and Share this: