Create a Text Button for Lightbox

  • RouletteRoll
    Asked on December 27, 2015 at 3:04 AM

    Hello.

    This is my website:

    www.rouletterol.com. mx

     

    And my lightbox is inside the footer, it says "CONTÁCTANOS"

    This is my code:

    <style>

     

    .jt-content {overflow:hidden !important;}

     

    </style>  

      <script src="https://form.jotform.co/static/feedback2.js?3.3.REV" type="text/javascript">

          var JFL_53598129820867 = new JotformFeedback({

            formId: '53598129820867',

            base: 'https://form.jotform.co/',

            windowTitle: 'Opt In Form #2',

            background: '#b05151',

            fontColor: '#FFFFFF',

            type: '2',

            height: 600,

            width: 600,

            openOnLoad: false

          });

        </script>

          <a class="btn lightbox-53598129820867" style="margin-top: 5px;color:white;font-family:'Impact';font-size:30px">CONTÁCTANOS</a>

     

     

    I'd like to change the text color when the mouse is on it, ¿How would it be possible to do?

    Thanks!

    Jotform Thread 732359 Screenshot
  • Boris
    Replied on December 27, 2015 at 12:37 PM

    You can change the style of the text button by adding your desired CSS in between the two <style> and </style> tags.

    The CSS selector for your lightbox button is .btn.lightbox-53598129820867, and since you want to style when it is being pointed with a mouse, we would add :hover to the selector: .btn.lightbox-53598129820867:hover

    So to change the color to gold on mouse-over, for example, you could use the CSS such as this:

    .btn.lightbox-53598129820867:hover { color: gold !important; }

    Your <style> tags would end up looking like this:

    <style>

    .jt-content {overflow:hidden !important;}

    .btn.lightbox-53598129820867:hover { color: gold !important; }

    </style>

    Of course, you can use any CSS color that you want, the gold color was simply an example. You can refer to the following page for a few more colors that you can use, but you can actually use any of the 16+ million CSS supported colors:

    http://www.w3schools.com/cssref/css_colornames.asp

    If you need further assistance, please let us know, and we will be happy to help.

  • RouletteRoll
    Replied on December 27, 2015 at 9:22 PM

    Thanks a lot! 

    I finalyy got it.

    I really like JotForm!

  • mert JotForm UI Developer
    Replied on December 28, 2015 at 3:44 AM

    In the name of my colleague, you are most welcome. If you need any help in the future, please always feel free to contact us.

     

    Have a great day.