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*/
Hi Sarah,
This is CSS debugging, and has nothing to with Marketo
Try
color: #000000 !important;
Otherwise, provide the URL of the page.
-Greg
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.
What code ? We really cannot help without the URL of the faulty landing page.
Doing so is against my company's policy. I will find my answer elsewhere.
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
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:
<button class="button" ... >
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...
.my-red-button { background-color: red; color: white; }
<button class="my-red-button" ...>Click Me</button>
#section1 button.my-blue-button { ... }