6 Replies Latest reply on Feb 21, 2018 7:21 AM by Blane McMichen

    Adding buttons to landing pages

    Sarah Smith

      We use pill buttons on our website and would like to continue that practice on our Marketo landing pages. These pages do not have forms.

       

      By adding the following to the template's CSS we can control the shape, background and border colors, but the font color will not change from white even though it is specifically called out to be black. .

       

      Any ideas why this won't work? 

       

      /*add button css*/  

      .button

        -webkit-border-radius: 30;

        -moz-border-radius: 30;

        border-radius: 30px;

        font-family: Arial;

        font-size: 16px;

        background: #ffc20e;

        color: #000000;

        padding: 10px 20px 10px 20px;

        border: solid #ffc20e 1px;

        text-decoration: none;

      }

      .btn:hover {

        background: #768692;

        text-decoration: none;

      }

        /*end button css*/ 

        • Re: Adding buttons to landing pages
          Grégoire Michel

          Hi Sarah,

           

           

          This is CSS debugging, and has nothing to with Marketo

           

          Try

            color: #000000 !important;

           

          Otherwise, provide the URL of the page.

           

          -Greg

            • Re: Adding buttons to landing pages
              Sarah Smith

              The reason I posted it here is because my code works fine elsewhere. The only place it doesn't work is on a Marketo Landing page.

               

              I tried using !important;   but that doesn't change anything.

                • Re: Adding buttons to landing pages
                  Grégoire Michel

                  What code ? We really cannot help without the URL of the faulty landing page.

                    • Re: Adding buttons to landing pages
                      Sarah Smith

                      Doing so is against my company's policy. I will find my answer elsewhere.

                        • Re: Adding buttons to landing pages
                          Grégoire Michel

                          Hi Sarah,

                           

                          What I can tell you is that it comes from the design or the content of your LP, with some colliding CSS, not from Marketo itself. You need to use a browser inspector and look into how the style for that button is being defined, what CSS is supercharging your .button class.

                           

                          -Greg

                          • Re: Adding buttons to landing pages
                            Blane McMichen

                            Hi Sarah,

                            Greg is right, in that we are very limited on how we can help.  I can try to guess what's going on or provide some suggestions, but it would be much easier if you could at least paste the HTML block that contains the button.  With that said...

                            It appears that you are mixing a few things here that each can have different styles. It looks like you are defining a .button class, so make sure your HTML is not a button tag. <button> If you are, there are 2 options:

                            1. A class needs to be added to use the class you defined, like this...  <button class="button" ... >
                            2. Or, you can change your style definition to apply to the button tag like this...    button { ... }

                             

                            It also looks like you are modifying the .btn class, which is a typical Bootstrap class.  If you are using Bootstrap, you will want to redefine only one of the button types, you should use the appropriate one, like .btn-primary, .btn-success, .btn-default, etc. and not .btn since it defines a functional style rather than an appearance style.  More is available on the Bootstrap site, but make sure you are looking at the documents for the version you are using, as Bootstrap 4 introduces some very different style definitions.

                             

                            I apologize if you already know this, but is a good reminder to us all. 

                            CSS is "cascading style sheets", which means that each style is defined or redefined in the order that they load on the page.  It is possible that your style is not applying because it is being re-written further down the page.  In general, you want to go from general to specific, something like this...

                            <head>

                            ...

                            <!-- Bootstrap Framework -->

                            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >

                            <!-- template stylesheet -->

                            <link rel="stylesheet" href="http://YOUR.MARKETO.INSTANCE/rs/MUNCHKINID/images/my-template.css">

                            <!--Locally Defined Styles-->

                            <style type="text/css">

                            .style1 {

                            ...

                            }

                            </style>

                            </head>

                             

                            <!-- inline styles will replace previous, but create maintenance issues -->

                            <button style="color:#000; background-color:red;" ... >

                             

                            Note: If your locally defined style is above a linked style sheet, it may be changed/redefined by the linked style sheet.

                             

                            Two more comments...

                            • The changes you are making will apply to all items on the page with the same tag/class.  If you only want to change one, then define a special class and use it to specifically change that one. 
                              Example:
                              .my-red-button  { background-color: red; color: white; }
                              <button class="my-red-button" ...>Click Me</button>
                            • CSS evaluates style definitions from right to left. 
                              Example:
                              #section1 button.my-blue-button { ... }
                              This defines .my-blue-button on a <button> tag object, within a containing tag object having the id="section1".