Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Jan 2019
    Location
    Europe
    Posts
    30
    Thanks
    18
    Thanked 0 Times in 0 Posts

    Question Call-to-action button suddenly stopped working

    Hey there guys,
    I hope that this post finds you in excellent spirits, and that you are having a great week.

    We have a bit of a weird issue that we are hoping you can help us with: in our main landing page header at https://highergradesfaster.com/, we have a large red call-to-action button.

    Overnight, this button has stopped functioning properly. Previously, you could hover at any point over the entire button and it would allow you to click through to the next page. However, now, you have to hover directly above the button text to achieve the same result.

    The relevant code is as follows:

    CSS

    Code:
    #header button {
        background: rgba(255, 51, 102, 0.9);
      opacity: 50%;
      width: 75%;
      border: 1px solid;
      color: white;
      font-family: HelveticaNeue-CondensedBold, Roboto, Akkurat-Bold, Franklin Gothic Medium, GuardianAgateSans1-Bold, HelveticaNeue-Bold,TradeGothic LT, Arial, sans-serif;
      padding: 10px 0px;
      text-align: center;
      display: inline-block;
      border-radius: 10px;
      font-size: 26px;
      }
      .button:hover{
        background: rgba(10, 191, 83, 1);
        color:white;
      }
      #header button:hover,
      #header button:active {
        background-color: rgba(10, 191, 83, 1);
        color: #fff;
      }
    HTML

    Code:
    <div class="arrow bounce">
            <button>
            <a href=
            "https://mediolana.myshopify.com/products/higher-grades-faster-%E2%84%A2">Order
            Higher Grades Faster!™ today!</a></button>
          </div>
    Does anyone have any ideas as to how to solve this? It seems like it should be something really simple, but the tutorials at W3 didn't shed much light on it.

    Any tips, guidance, pointers etc. are, as ever, sincerely appreciated.

    With very best wishes,

    Alex Maxim
    Last edited by Alex Maxim; Oct 7th, 2019 at 01:23 PM.

  2. #2
    Administrator VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    11,405
    Thanks
    7
    Thanked 1,375 Times in 1,344 Posts
    A button element is supposed to be part of a form and, without any specific “type” attribute, defaults to type “submit”. If it isn’t supposed to submit then the value for the type attribute should be set to “button” (i. e. <button type="button">…</button>). Hovever: push button elements have no functionality on their own and are therefore pretty useless, so why is there a button element in the first place when there is no form to which it would submit? You are using a link to refer to the specified page, so you might as well scrap the button element and style the link itself.

    Code:
    <div class="arrow bounce">
            <a class="cta" href="https://mediolana.myshopify.com/products/higher-grades-faster-%E2%84%A2">Order Higher Grades Faster!™ today!</a>
          </div>
    Code:
    #header .cta {
        background: rgba(255, 51, 102, 0.9);
      opacity: 50%;
      width: 75%;
      border: 1px solid;
      color: white;
      font-family: HelveticaNeue-CondensedBold, Roboto, Akkurat-Bold, Franklin Gothic Medium, GuardianAgateSans1-Bold, HelveticaNeue-Bold,TradeGothic LT, Arial, sans-serif;
      padding: 10px 0px;
      text-align: center;
      display: inline-block;
      border-radius: 10px;
      font-size: 26px;
      }
      #header .cta:hover{
        background: rgba(10, 191, 83, 1);
        color:white;
      }
      #header .cta:active {
        background-color: rgba(10, 191, 83, 1);
        color: #fff;
      }
    Looks exactly the same but with one redundant, non-functional element less.

  3. Users who have thanked VIPStephan for this post:

    Alex Maxim (Oct 7th, 2019)

  4. #3
    New Coder
    Join Date
    Jan 2019
    Location
    Europe
    Posts
    30
    Thanks
    18
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by VIPStephan View Post
    A button element is supposed to be part of a form and, without any specific “type” attribute, defaults to type “submit”. If it isn’t supposed to submit then the value for the type attribute should be set to “button” (i. e. <button type="button">…</button>). Hovever: push button elements have no functionality on their own and are therefore pretty useless, so why is there a button element in the first place when there is no form to which it would submit? You are using a link to refer to the specified page, so you might as well scrap the button element and style the link itself.

    Code:
    <div class="arrow bounce">
            <a class="cta" href="https://mediolana.myshopify.com/products/higher-grades-faster-%E2%84%A2">Order Higher Grades Faster!™ today!</a>
          </div>
    Code:
    #header .cta {
        background: rgba(255, 51, 102, 0.9);
      opacity: 50%;
      width: 75%;
      border: 1px solid;
      color: white;
      font-family: HelveticaNeue-CondensedBold, Roboto, Akkurat-Bold, Franklin Gothic Medium, GuardianAgateSans1-Bold, HelveticaNeue-Bold,TradeGothic LT, Arial, sans-serif;
      padding: 10px 0px;
      text-align: center;
      display: inline-block;
      border-radius: 10px;
      font-size: 26px;
      }
      #header .cta:hover{
        background: rgba(10, 191, 83, 1);
        color:white;
      }
      #header .cta:active {
        background-color: rgba(10, 191, 83, 1);
        color: #fff;
      }
    Looks exactly the same but with one redundant, non-functional element less.
    Dear VIPStephan,
    Thank you so much for this!! It seems to work wonderfully now.

    We are going to print off your code and study it. It is a master of economy – really ingenious.

    Herzlichen Dank!

    With very best wishes,

    Alex Maxim

  5. #4
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    3,594
    Thanks
    3
    Thanked 641 Times in 627 Posts
    Hi there Alex Maxim,

    your page takes an eternity to load, probably longer
    that it takes to get the Higher Grades.

    Also the page is absolutely riddled width 807 coding
    errors and warnings...


    coothead
    ~ the original bald headed old fart ~

  6. #5
    Senior Coder deathshadow's Avatar
    Join Date
    Feb 2016
    Location
    Keene, NH
    Posts
    3,736
    Thanks
    5
    Thanked 535 Times in 521 Posts
    As @coothead is implying the use of a <button> tag for the CTA link is the LEAST of the site's problems. If anything it's an indication of deep rooted construction issues. To be frank, whoever made the page isn't qualified to write a single line of HTML or CSS. It is a bizzaro-land mix of HTML 3 and HTML 5.

    Such as the use of tags like <font> and <center> that have ZERO business in any HTML written after 1997, gibberish nonsensical use of ID attributes with ID's so large I'd sooner eat a bullet than work with that codebase, endless pointless DIV for nothing, META tags inside the BODY where they're completely invalid and possibly non-functional, <p> wrapping multiple paragraphs with double-breaks doing <p>'s job, <style> inside <body> where it's complete gibberish, static style in the markup where it has no business being, b+font doing numbered heading's job...

    Scary bad for a squeeze page that doesn't even have the actual signup form on it. (Which I'd probably modal dialog on the same page, works better for squeeze).

    End result is 107k of markup to deliver 27k of plaintext and not even a dozen content media elements -- not even 40k of HTML's job. Worse, due to the UTTER AND COMPLETE LACK OF SEMANTIC MARKUP the page is flipping the bird at accessibility standards, possibly telling large swaths of visitors to the page to go suck an egg.

    It needs a LOT of loving. Of course since it seems to be running inside and/or around Shopify, that basically doubles or more the cost of dragging it kicking and screaming into the light if you were to hire someone to do it.
    “There are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies and the other way is to make it so complicated that there are no obvious deficiencies.” – C.A.R. Hoare, The 1980 ACM Turing Award Lecture
    http://www.cutcodedown.com


 

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •