Your Achievements
Level 1
0% to
Level 2
Next /
to gain points, level up, and earn exciting badges like the new Applaud 5 BadgeLearn more!
View All BadgesSign in to view all badges
Open Alert Bar

Re: NEED HELP - Different color buttons/hover in Landing Page

Nick_Mignacca1
Level 1
Level 1
‎03-17-2018 01:15 AM
‎03-17-2018 01:15 AM

NEED HELP - Different color buttons/hover in Landing Page

Hello everyone,

We use different colored sections on our landing pages and I'd love to have the option of displaying buttons in different colors.  Can I say have a black button with a blue hover in one section and a white button with a black hover on another?

We can currently toggle the BG and hover color of a single button, but cannot affect subsequent buttons. 

Here is what our styling code looks like:

<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!-->
<html lang="en"> <!--<![endif]-->
  <!-------------------------------- 
Header color = #0d0c0d 
Footer color = #0d0c0d
Section color = #ebedee
Button Banner color = #0099cc
Button Banner Hover color = #0099cc
::selection = #0099cc
a:  #ffffff
hover:  #000000
Logo link = https://www.keanewzealand.com/
Privacy Policy link =  https://www.keanewzealand.com/privacy-policy/
Terms link =  https://www.keanewzealand.com/terms-and-conditions/
Contact link =  https://www.keanewzealand.com/
Footer link color = 555555
Footer link hover color = 555555
Footer text color = 555555
Kea New Zealand
----------------------------------->
  <head>  
    <meta charset="utf-8">  
    <title>Landing Page</title>  
    <link href="https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,600,700,800,900" rel="stylesheet">  
    <meta name="author" content="">  
    <meta name="keywords" content="">  
    <meta name="description" content="">  
    <meta property="og:image" content="${previewImg}">  
    <meta property="og:type" content="website">  
    <link rel="icon" type="image/x-icon" href="http://portals.keanewzealand.com/rs/836-JGU-553/images/favicon.ico">  
    <link rel="icon" type="image/png" href="http://portals.keanewzealand.com/rs/836-JGU-553/images/favicon-32x32.png" sizes="32x32" />  
    <link rel="icon" type="image/png" href="http://portals.keanewzealand.com/rs/836-JGU-553/images/favicon-16x16.png" sizes="16x16" />  
      
    <!-- Marketo Variable Definitions -->  
    <meta class="mktoString" id="logoLink" mktoName="Logo Link" default="https://www.keanewzealand.com/">   
    <meta class="mktoString" id="previewImg" mktoName="Page Preview Image" default="http://portals.keanewzealand.com/rs/836-JGU-553/images/bannerBG.jpg"> 
    <meta class="mktoColor" id="headerBgColor" mktoName="Header BG Color" default="#0d0c0d">  
    <meta class="mktoString" id="bannerBackgroundImg" mktoName="Banner BG Image" default="http://portals.keanewzealand.com/rs/836-JGU-553/images/bannerBG.jpg">
    <meta class="mktoColor" id="bannerBgColor" mktoName="Banner BG Color" default="#ffffff">
    <meta class="mktoColor" id="section1BgColor" mktoName="Section 1 BG Color" default="#ffffff">
    <meta class="mktoString" id="section1ButtonLabel" mktoName="Section 1 Button Label" default="READ MORE">
    <meta class="mktoColor" id="section1ButtonBgColor" mktoName="Section 1 Button Color" default="#0099cc">
    <meta class="mktoColor" id="section1ButtonBgHoverColor" mktoName="Section 1 Button Hover Color" default="#0099cc">
    <meta class="mktoString" id="section1ButtonLink" mktoName="Section 1 Button Link" default="#"> 
    <meta class="mktoColor" id="section2BgColor" mktoName="Section 2 BG Color" default="#EBEDEE">
    <meta class="mktoColor" id="section3BgColor" mktoName="Section 3 BG Color" default="#3d3d3d">
    <meta class="mktoColor" id="section4BgColor" mktoName="Section 4 BG Color" default="#ffffff">
    <meta class="mktoColor" id="section4ButtonBgColor" mktoName="Section 4 Button Color" default="#0099cc">
    <meta class="mktoString" id="section4ButtonLabel" mktoName="Section 4 Button Label" default="READ MORE">
    <meta class="mktoColor" id="section4ButtonBgHoverColor" mktoName="Section 4 Button Hover Color" default="#0099cc">
    <meta class="mktoString" id="section4ButtonLink" mktoName="Section 4 Button Link" default="#">
    <meta class="mktoColor" id="section5BgColor" mktoName="Section 5 BG Color" default="#ffffff">
    <meta class="mktoString" id="section4VideoLink" mktoName="Section 5 Video URL" default="https://www.youtube.com/embed/seS2lp7WFbU">
    <meta class="mktoColor" id="section6BgColor" mktoName="Section 6 BG Color" default="#ffffff">
    <meta class="mktoColor" id="section6ButtonBgColor" mktoName="Section 6 Button Color" default="#0099cc">
    <meta class="mktoString" id="section6ButtonLabel" mktoName="Section 6 Button Label" default="READ MORE">
    <meta class="mktoColor" id="section6ButtonBgHoverColor" mktoName="Section 6 Button Hover Color" default="#0099cc">
    <meta class="mktoString" id="section6ButtonLink" mktoName="Section 6 Button Link" default="#">
    <meta class="mktoColor" id="section7BgColor" mktoName="Section 7 BG Color" default="#ffffff">
    <meta class="mktoColor" id="section8BgColor" mktoName="Section 8 BG Color" default="#ffffff">
    <meta class="mktoColor" id="section9BgColor" mktoName="Section 9 BG Color" default="#ffffff">
    <meta class="mktoColor" id="section10BgColor" mktoName="Section 10 BG Color" default="#ffffff">
    <meta class="mktoColor" id="section11BgColor" mktoName="Section 11 BG Color" default="#ffffff">
    <meta class="mktoColor" id="section12BgColor" mktoName="Section 11 BG Color" default="#ffffff">
    <meta class="mktoColor" id="partnersABgColor" mktoName="Partners A BG Color" default="#ffffff">
    <meta class="mktoColor" id="partnersBBgColor" mktoName="Partners B BG Color" default="#EBEDEE">
    <meta class="mktoColor" id="footerBgColor" mktoName="Footer BG Color" default="#0d0c0d">
    <meta class="mktoBoolean" id="showHero" mktoName="Show Hero?" default="true" false_value="none" true_value="block" false_value_name="Hide" true_value_name="Show">
    <meta class="mktoBoolean" id="showHeader" mktoName="Show Header Section?" default="true" true_value="block" false_value="none" false_value_name="Hide" true_value_name="Show">
    <meta class="mktoBoolean" id="showBanner" mktoName="Show Banner Section?" default="true" true_value="block" false_value="none" false_value_name="Hide" true_value_name="Show">
    <meta class="mktoBoolean" id="showSection1" mktoName="Show Section 1?" default="true" true_value="block" false_value="none" false_value_name="Hide" true_value_name="Show">
    <meta class="mktoBoolean" id="showSection1Button" mktoName="Show Section 1 Button?" default="true" true_value="block" false_value="none" false_value_name="Hide" true_value_name="Show">
    <meta class="mktoBoolean" id="showSection2" mktoName="Show Section 2?" default="true" true_value="block" false_value="none" false_value_name="Hide" true_value_name="Show">
    <meta class="mktoBoolean" id="showSection3" mktoName="Show Section 3?" default="true" true_value="block" false_value="none" false_value_name="Hide" true_value_name="Show">
    <meta class="mktoBoolean" id="showSection4" mktoName="Show Section 4?" default="true" true_value="block" false_value="none" false_value_name="Hide" true_value_name="Show">
    <meta class="mktoBoolean" id="showSection4Button" mktoName="Show Section 4 Button?" default="true" true_value="block" false_value="none" false_value_name="Hide" true_value_name="Show">
    <meta class="mktoBoolean" id="showSection5" mktoName="Show Section 5?" default="true" true_value="block" false_value="none" false_value_name="Hide" true_value_name="Show">
    <meta class="mktoBoolean" id="showSection6" mktoName="Show Section 6?" default="true" true_value="block" false_value="none" false_value_name="Hide" true_value_name="Show">
    <meta class="mktoBoolean" id="showSection6Button" mktoName="Show Section 6 Button?" default="true" true_value="block" false_value="none" false_value_name="Hide" true_value_name="Show">
    <meta class="mktoBoolean" id="showSection7" mktoName="Show Section 7?" default="true" true_value="block" false_value="none" false_value_name="Hide" true_value_name="Show">
    <meta class="mktoBoolean" id="showSection8" mktoName="Show Section 8?" default="true" true_value="block" false_value="none" false_value_name="Hide" true_value_name="Show">
    <meta class="mktoBoolean" id="showSection9" mktoName="Show Section 9?" default="true" true_value="block" false_value="none" false_value_name="Hide" true_value_name="Show">
    <meta class="mktoBoolean" id="showSection10" mktoName="Show Section 10?" default="true" true_value="block" false_value="none" false_value_name="Hide" true_value_name="Show">
    <meta class="mktoBoolean" id="showSection11" mktoName="Show Section 11?" default="true" true_value="block" false_value="none" false_value_name="Hide" true_value_name="Show">
    <meta class="mktoBoolean" id="showSection12" mktoName="Show Section 12?" default="true" true_value="block" false_value="none" false_value_name="Hide" true_value_name="Show">
    <meta class="mktoBoolean" id="showSection12Form" mktoName="Show Form?" default="true" true_value="block" false_value="none" false_value_name="Hide" true_value_name="Show">
    <meta class="mktoBoolean" id="showPartnersA" mktoName="Show Partners A?" default="true" true_value="block" false_value="none" false_value_name="Hide" true_value_name="Show">
    <meta class="mktoBoolean" id="showPartnersB" mktoName="Show Partners B?" default="true" true_value="block" false_value="none" false_value_name="Hide" true_value_name="Show">
    <meta class="mktoBoolean" id="showFooter" mktoName="Show Footer Section?" default="true" true_value="block" false_value="none" false_value_name="Hide" true_value_name="Show">
    <!-- Mobile Specific Metas -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <!-- Libs CSS -->
    <link href="http://portals.keanewzealand.com/rs/836-JGU-553/images/bootstrap.css" rel="stylesheet">
    <!-- Template CSS -->
    <link href="http://portals.keanewzealand.com/rs/836-JGU-553/images/style-mkto.css" rel="stylesheet"> 
    <!-- Google Fonts -->   <link href="https://nation.marketo.com//fonts.googleapis.com/css?family=Open+Sans:400italic,400,800,700,300" rel="stylesheet" type="text/css">
    <!--[if lt IE 9]>
<script src="//na-sjh.marketo.com/rs/514-OSY-890/images/html5shiv.js"></script>
<script src="//na-sjh.marketo.com/rs/514-OSY-890/images/respond.js"></script>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<![endif]-->
    <style>
      /*LITTLE GIANT STYLING*/
      @import url(http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900);
      * {margin: 0;padding: 0px;font-family: 'Helvetica', sans-serif;}
      body {background: #fff;margin: 0;color: #5a5a5a;}
      h1, h2, h3, h4, h5, h6 {font-family: 'Helvetica', sans-serif;font-weight: 400;}
      p {padding: 0;margin-bottom: 12px;font-family: 'Helvetica', sans-serif;font-weight: 300;font-size: 16px;line-height: 26px;color: #666;margin-top: 10px;}
      html,body {height: 100%;}
      .alignleft { float: left; }
      .alignright { float: right; }
      .aligncenter, .aligncenter img {margin-left: auto;margin-right: auto;display: block;clear: both;}
      .centered {text-align: center}
      .mt {margin-top: 50px;}
      .mb {margin-bottom: 50px;}
      .mtb {margin-top: 50px; margin-bottom: 50px;}
      .mtb2 { margin-top: 100px; margin-bottom: 100px;}
      .ptb {padding-top: 80px; padding-bottom: 80px;}
      .mr {margin-right: 15px;}
      .clear {clear: both;display: block;font-size: 0;height: 0;line-height: 0;width:100%;}
      ::-moz-selection  {color: #fff;text-shadow:none;background:#2B2E31;}
      ::selection {color: #fff;text-shadow:none;background:#2B2E31;}
      *,*:after,*:before {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;padding: 0;margin: 0;}
      a {padding: 0;margin: 0;text-decoration: none;-webkit-transition: background-color .4s linear, color .4s linear;-moz-transition: background-color .4s linear, color .4s linear;-o-transition: background-color .4s linear, color .4s linear;-ms-transition: background-color .4s linear, color .4s linear;transition: background-color .4s linear, color .4s linear;color: #1abc9c;}
      a:hover,a:focus {text-decoration: none;color:#696E74;}
      .nopadding {padding: 0px !important;margin: 0px;}
      /* FORM CONFIGURATION */
      input {font-size: 16px;min-height: 40px;border-radius: 2px;line-height: 20px;padding: 8px 30px 9px;border: 1px solid #b9b9af;margin-bottom: 10px;background-color: #fff;-webkit-transition: background-color 0.2s;transition: background-color 0.2s;}
      .subscribe-input {float: left;width: 65%;text-align: left;margin-right: 2px;}
      .subscribe-submit {right: 0;}
      .btn-subscribe {background: #0099cc;color: white;border-radius: 50px;margin-left: 15px;font-size: 11px;letter-spacing: 1px;text-transform: uppercase;padding: 11px 28px 10px 28px;}
      /* Buttons Configuration */
      .btn-conf {border-radius: 50px;margin-right: 15px;font-size: 11px;letter-spacing: 1px;text-transform: uppercase;padding: 11px 28px 10px 28px;}
      .btn-theme {background: #0099cc;color: white}
      /* Bootstrap Modification */
      hr {border: 1px solid #5a5a5a;width: 70px;}
      /* HEADER CONFIGURATION - CREATED BY CODROPS */
      .large-header {position: relative;width: 100%;background: #333;overflow: hidden;background-size: cover;background-position: center center;z-index: 1;}
      .main-title {margin: 0;padding: 0;color: #B7B3B3;text-align: center;}
      .main-tagline {margin-top: 10px;padding: 0;color: #f3f3f3;text-align: center;font-size: 18px;}
      .demo-1 .main-title {text-transform: uppercase;font-size: 42px;letter-spacing: 4px;}
      .main-title .thin {font-weight: 100;}
      @media only screen and (max-width : 768px) {
        .demo-1 .main-title {   font-size: 30px;}
      }
      /* BLACK SECTION */
      #blk {padding-bottom: 80px;padding-top: 80px;}
      #blk2{padding-bottom: 80px;padding-top: 80px;}
      #blk h5 {color: #B7B3B3;letter-spacing: 1px;text-transform: uppercase;}
      #blk hr {border: 1px solid #B7B3B3;width: 100px;}
      #blk2 h5 {color: #B7B3B3;letter-spacing: 1px;text-transform: uppercase;}
      #blk2 hr {border: 1px solid #B7B3B3;width: 100px;}
      /* Grey Section */
      #grey {padding-bottom: 80px;padding-top: 80px;}
      .icon {font-size: 40px;}
      #grey h5 {letter-spacing: 1px;text-transform: uppercase;}
      /* News Section */
      .news .container {width: 100%}
      .section-bg-color {background-color: #fff;height: 100%;padding-top: 40px;padding-bottom: 80px;}
      .section-bg-color h3, .section-bg-color h1, .section-bg-color p {margin-left: 25px;margin-right: 25px}
      .section-bg-color h3 {font-weight: 300;}
      .section-bg-color h1 {font-weight: 900;text-transform: uppercase;}
      .section-bg-color hr{border-bottom: 1px solid #e5e6ec;border-top: transparent;width: 100%;}
      .section-bg-color hr.blog {border: 2px solid #5a5a5a;width: 70px;margin-left: 25px;}
      nm {font-size: 12px;color: #939399;font-weight: 400;}
      /*PORTFOLIO SECTION*/
      #portfolio {position: relative;padding-bottom: 0;display: block;width: 100%;}
      .cbp-item-wrapper {background: #1D1D25;}
      .cbp-item-wrapper a img {display: block;width: 100%;height: auto;opacity: 0.4;-webkit-transition: all 0.4s ease;transition: all 0.4s ease;}
      .cbp-item-wrapper a:hover img {opacity: 0.8;}.cbp-l-caption-title {color: #fff;font: 400 16px/18px sans-serif;letter-spacing: 1px;margin-bottom: 5px;}
      @media (min-width: 1580px) {
        .cbp-l-grid-fullScreen .cbp-item {   /* @editable properties */   min-width: 400px;   max-height: 600px;}
      }
      /* FEATURED SECTION */
      #featured {padding-bottom: 10; color: #b9b9b9;text-align: center;}
      #featured .overlay {padding-bottom: 0;background: none repeat scroll 0 0 rgba(40, 40, 40, 0.9);padding-top: 100px;width: 100%;height: 100%;}
      #featured h5 {color: #B7B3B3;letter-spacing: 1px;text-transform: uppercase;}
      #featured p {color: #b9b9b9;}
      #featured hr {border: 1px solid #B7B3B3;width: 100px;}
      .hero{padding:80px 0;}
      .section1{display: ${showSection1};}
      .section2{display: ${showSection2};}
      .section3{display: ${showSection3};}
      .section4{display: ${showSection4};}
      .section5{display: ${showSection5};}
      .section6{display: ${showSection6};}
      .section7{display: ${showSection7};}
      .section8{display: ${showSection8};}
      .section9{display: ${showSection9};}
      .section10{display: ${showSection10};}
      .section11{display: ${showSection11};}
      .section12{display: ${showSection12};}
      .partnersA{display: ${showPartnersA};}
      .partnersB{display: ${showPartnersB};}
      .footer{background: ${footerBgColor};/*padding-bottom: 80px;padding-top: 80px;*/display: ${showFooter};}
      #footerForm{max-width:350px;width:100% !important;margin:0 auto;}
      #mktoEditorPlaceholder .mktoPlaceholder .mktoVerticalWrap{line-height:20px;}
      /* ==========================================================================DO NOT EDIT - UNLESS YOU KNOW WHAT YOUR DOING========================================================================== */ 
      #headerSection {background-color: ${headerBgColor};}
      #banner {background-color: ${bannerBgColor} !important;background-image: url(${bannerBackgroundImg}) !important;}
      #section1 {background-color: ${section1BgColor};}
      #section2 {background-color: ${section2BgColor};}
      #section3 {background-color: ${section3BgColor};}
      #section4 {background-color: ${section4BgColor};}
      #section5 {background-color: ${section5BgColor};}
      #section6 {background-color: ${section6BgColor};}
      #section7 {background-color: ${section7BgColor};}
      #section8 {background-color: ${section8BgColor};}
      #section9 {background-color: ${section9BgColor};}
      #section10 {background-color: ${section10BgColor};}
      #section11 {background-color: ${section11BgColor};}
      #section12 {background-color: ${section12BgColor};}
      #partnersA {background-color: ${partnersABgColor};}
      #partnersB {background-color: ${partnersBBgColor};}
      #footerSection {background-color: ${footerBgColor};padding:25px 0px 15px 0px;}
      /* ==========================================================================Basic Styling ========================================================================== */ 
      body { width: 100%; min-height: 100%; font-family: 'Droid Sans', sans-serif; font-size: 15px; font-weight: normal; line-height: 1.5; color: #585858; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;}
      h1, h2, h3, h4, h5, h6 { font-weight: 400; font-family:'Montserrat', sans-serif,  "Tahoma", Helvetica, Arial,sans-serif; color: #585858; transition: all .50s ease-in-out; -moz-transition: all .50s ease-in-out; -webkit-transition: all .50s ease-in-out;}
      h1, h2, h3, h4, h5, h6 { margin-top: 0;  margin-bottom: 20px;}
      h1 {font-size: 44px;}
      h2 {font-weight: 700; margin-bottom: 20px; }
      h3 {font-size: 26px; font-weight: 700; color: #585858;}
      h4 {font-size: 20px; font-weight: 700; color: #585858;}
      p { margin-bottom: 20px; line-height: 24px;}
      a {-webkit-transition: all 150ms ease-in; -moz-transition: all 150ms ease-in; -o-transition: all 150ms ease-in; transition: all 150ms ease-in; color: #ffffff;}
      a:hover, a:focus { text-decoration: none; color: #000000; outline: none; } 
      ul {list-style-type: circle;}
      ::-moz-selection { text-shadow: none; background: #0099cc; color: #FFF;}
      ::selection { text-shadow: none; background: #0099cc; color: #FFF; }
      .btn {-webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; transition: all .3s ease-in-out; border-radius: 0; padding: 15px 35px; font-weight: bold;}
      .btn:hover, .btn:focus { background-color:#0099cc; color: #FFF;} 
      .btn-lg{width: 250px; height 86px!important; font-size: 20px}
      .btn-transparent {background-color: ${section1ButtonBgColor}!important; color: #ffffff; }
      .btn-transparent:hover {background-color: ${section1ButtonBgHoverColor}!important; color: #ffffff; }
      .btn-transparent {background-color: ${section4ButtonBgColor}}
      .btn-transparent:hover {background-color: ${section4ButtonBgHoverColor}}
      .btn-transparent {background-color: ${section6ButtonBgColor}}
      .btn-transparent:hover {background-color: ${section6ButtonBgHoverColor}}
      .img-responsive img {display: block; width: 100% \9; max-width: 100%; height: auto;}
      .kc-steps{margin-top:0;margin-bottom:0;}
      .footer p, {color: #555555; margin-bottom: 10px;}
      .footer a {color: #555555; margin-bottom: 10px;}
      .footer a:hover {color: #555555;}
      .footer-links {text-align:right;}
      .formStyle {margin:0 auto; width:50%;}
      .sr-only {position: absolute;width: 1px;height: 1px; margin: -1px;padding: 0;overflow: hidden;clip: rect(0,0,0,0);border: 0;}  
      /* ==========================================================================
      FORM 2.0 -- Simple Form STYLES ONLY
      ========================================================================== */    .mktoForm .mktoButtonWrap.mktoGlow .mktoButton, .mktoForm .mktoButtonWrap.mktoSimple .mktoButton {
        -webkit-border-radius: 5px;
        -khtml-border-radius: 5px;
        -moz-border-radius: 5px;
        -ms-border-radius: 5px;
        -o-border-radius: 5px;
        border-radius: 5px;
        color: #fff;
        border: none !important;
        box-shadow: none !important;
        padding:12px 14px !important;
        font-size: 1em;
        background: #0099cc;
        background-color: #0099cc !important;
        background-image:  none !important;
        background-image:  none !important;
        background-image:  none !important;
        background-image:  none !important;
        text-transform: none !important;
        /*   background: -webkit-gradient(linear, 0 0, 0 bottom, from(#962D9E), to(#64038D)) !important;
        background: -webkit-linear-gradient(#962D9E, #64038D) !important;
        background: -moz-linear-gradient(#962D9E, #64038D) !important;
        background: -ms-linear-gradient(#962D9E, #64038D) !important;
        background: -o-linear-gradient(#962D9E, #64038D) !important;
        background: linear-gradient(#962D9E, #64038D) !important;
        -pie-background: linear-gradient(#962D9E, #64038D) !important;
        */  
      }  .mktoForm .mktoButtonWrap.mktoGlow .mktoButton:hover, mktoForm .mktoButtonWrap.mktoSimple .mktoButton:hover {
        border: none !important;
        background: #0099cc!important; }
    </style>   
    <link href="http://portals.keanewzealand.com/rs/836-JGU-553/images/main.css" rel="stylesheet">      <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->   
    <script src="//templates.marketo.net/template19/js/ie10-viewport-bug-workaround.js"></script>       <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->   <!--[if lt IE 9]>   <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>   <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>   <![endif]-->  
  </head>
  <body data-spy="scroll" data-target=".navigation">

As far as I can tell, the !important; color: #ffffff; } script on lines 297 and 298 is what allows me to effectively customize a button's color and hover color.

However, when I try add the script to subsequent buttons, all I achieve is making the last button I added the script to the only one that is customisable.

Is there an error or are we missing code somewhere?

Any help would be much appreciated.

Thanks very much

Nick

0 Likes
3,032
Reply
2 REPLIES 2
SanfordWhiteman
Level 10 - Community Moderator
Level 10 - Community Moderator
‎03-17-2018 11:35 PM
‎03-17-2018 11:35 PM

Re: NEED HELP - Different color buttons/hover in Landing Page

As far as I can tell, the !important; color: #ffffff; } script on lines 297 and 298...

This isn't "script," though, it's merely CSS rules (it's very important to distinguish CSS from JS).

Anyway, what you're dealing with here isn't Marketo-specific and it's elemental to the way the CSS cascade works.

Putting !important after a property value (not before, after) sets the property priority to important. You can read more about how important works at the above link and elsewhere. In brief, all properties set to important are evaluated after all properties without important, e.g. for exactly the same selector + property, a value marked important will always win out in the cascade. That doesn't mean that an arbitrary important value will win, it just means the important values compete with each other, if you will, ignoring the non-important ones.

When you repeatedly use !important for exactly the same selector + property you just end up creating a simple top-to-bottom cascade (bottom rule wins).

So 

button {
  color: red !important;
}
button {
  color: blue !important;
}
button {
  color: green !important;
}

always results in green button text. If you insert a non-important rule for the same selector + property, it has no meaning. This will still be green:

button {
  color: red !important;
}
button {
  color: blue !important;
}
button {
  color: green !important;
}
button {
  color: purple;
}

The order of the important rules, other than which one is last, also doesn't matter. This will also be green:

button {
  color: blue !important;
}
button {
  color: red !important;
}
button {
  color: green !important;
}
button {
  color: purple;
}

But there's reams more to learn about CSS than this basic overview of one small area. It's probably time to get a developer involved who's been around this stuff for awhile.

0 Likes
2,317
Reply
Dave_Roberts
Level 10
Level 10
‎06-27-2018 09:32 PM
‎06-27-2018 09:32 PM

Re: NEED HELP - Different color buttons/hover in Landing Page

Hey Nick-

I think I see the issue here. The way the styles are written for the buttons here could be improved with just a little tweak to the code. Right now, it looks like there is a class on your buttons called "btn-transparent" [see line 297]. That same class (and it's :hover state) are getting styled three-times-over and as Sanford mentioned, the !important flag on the first is overriding the other two. The way this code reads right now is: Make all buttons the color(s) I set for the Section1 button (b/c that's !important) and ignore what I've set for section 4 and 6.

What you'll want to do here is to write that to be just a bit more specific -- we can start by targeting the Section the button is in, and then we'll target that same class (and drop the !important flag).

So, if you started with this code:

  1.       .btn-transparent {background-color: ${section1ButtonBgColor}!important; color: #ffffff; } 
  2.       .btn-transparent:hover {background-color: ${section1ButtonBgHoverColor}!important; color: #ffffff; } 
  3.       .btn-transparent {background-color: ${section4ButtonBgColor}}  /* this doesn't get read b/c of the !important flag above it */
  4.       .btn-transparent:hover {background-color: ${section4ButtonBgHoverColor}} /* this doesn't get read b/c of the !important flag above it */ 
  5.       .btn-transparent {background-color: ${section6ButtonBgColor}}  /* this doesn't get read b/c of the !important flag above it */
  6.       .btn-transparent:hover {background-color: ${section6ButtonBgHoverColor}}  /* this doesn't get read b/c of the !important flag above it */

You'd end up with this code:

  1.      #section1 .btn-transparent {background-color: ${section1ButtonBgColor}!important; color: #ffffff; } 
  2.       #section1 .btn-transparent:hover {background-color: ${section1ButtonBgHoverColor}!important; color: #ffffff; } 
  3.       #section4 .btn-transparent {background-color: ${section4ButtonBgColor}} 
  4.       #section4 .btn-transparent:hover {background-color: ${section4ButtonBgHoverColor}} 
  5.       #section6 .btn-transparent {background-color: ${section6ButtonBgColor}} 
  6.       #section6 .btn-transparent:hover {background-color: ${section6ButtonBgHoverColor}} 

Note: I can't see the rendered HTML, but Im assuming based on the stylesheet that you've got about a dozen sections that have an ID value of "section1" thru "section12" [see line 247]. By placing the section id (# in CSS) and a space right before the button styles, this limits the rule here to target only the buttons in those sections. You can think of the space as meaning "inside", so line 1. here would read something like "Find an element with an ID value of "section1", then go inside that element and look for another element with a class (" . " in CSS) of btn-transparent. Make all of those elements text white and background whatever color the section1ButtonBgColor variable is set to."

Let me know if this works for you and  if not, I'd be happy to dig in a bit more if you can share a link to a live version of the page so I can see what this looks like when it's all rendered out.

0 Likes
2,317
Reply
Home