Web Analytics Made Easy -
StatCounter Clickable Div Button - CodingForum

Announcement

Collapse
No announcement yet.

Clickable Div Button

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Clickable Div Button

    Hello there,

    I am a total greenhorn at this stuff. Please feel free to respond to my questions assuming that I know abolustely nothing.

    I have a div class button on my site - and I need to make the entire button clickable (without underling the text within the button). I cannot figure out how to do this. I've searched many sites, but the <a class> stuff I've found kills many of the features I entered into the CSS. How can I make this whole button clickable and still preserve the featuers I entered into the CSS for the button?

    Here is the URL: https://www.definefinancial.com/jon-...ncial-planner/

    Here is the HTML code for the div class button:

    Code:
    <div style="text-align: center;">
    <div class="button"><strong>Book An Appointment with Jon Luskin</strong></div>
    &nbsp;
    
    &nbsp;
    
    </div>
    Here is the CSS for the button:

    Code:
    .button {
        border-radius: 4px;
        background-color: #001c57;
        color: white;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 18px;
        margin: 4px 2px;
        -webkit-transition-duration: 0.8s; /* Safari */
        transition-duration: 0.8s;
        cursor: pointer;
        border: 2px solid #ffffff;
    }
    .button:hover {
        background-color: #ffffff;
        color: #001c57;}
    Thanks!

  • #2
    Why don't you want to use the <button> element?

    Comment


    • #3
      Well...

      The <a> (anchor) tag is kind of important considering that it sends the user to the page you need. There are other ways to link to another page, but way too convoluted and unnecessary. I would recommend using the <a> tag, if going to another page is your intent. Now if you're opening a lightbox, making something appear withing the page or something else that doesn't drive the user away from the /join-luskin-financial-planner/ page, then that's something which we can discuss in due time.

      That being said, it all depends on the button's purpose.

      Using it as a link:
      Code:
      <div class="button">
          <a class="appt" href="your-site-page.html">Book An Appointment with Jon Luskin</a>
      </div>
      Stylesheet (keeping the properties basic here):
      Code:
      .button a.appt {
          color: #fff;
          display: block;
          font-weight: bold;
          padding: 15px 32px;
          text-decoration: none;
      }
      So three things out of this.
      1) You'll notice that not only did I add a link with a class, I also stripped the strong tag. It can be applied to the stylesheet for cleaner markup.
      2) Replace the padding on the div button class to padding:0;
      3) If you feel that was what added is being overridden by other element declarations, classes, and (especially) ids, feel free to read up on Specifics on Specificity. This will give you a much better understanding on how the overriding process works with stylesheets.
      Last edited by Judgment Day; Oct 6, 2016, 02:01 PM. Reason: Added some text, an href link and a property in the code.

      Comment


      • #4
        I need to make the entire button clickable
        You do not say what the reaction should be when clicked. Do you want to load another page? Then Judgement Day's answer should tell you all you need.

        Comment


        • #5
          Great. This is awesome. I'm getting closer to this being perfect. The only issue left now is that a.appt feature is ursurping the hover feature. i.e. I want the text of the button to change when hovered over. Right now, the text is always white. I'd the text to change to blue when hovered over.

          Here is the css at the moment:

          <code>

          }
          .button {
          border-radius: 4px;
          background-color: #001c57;
          color: white;
          padding: 15px 32px;
          text-align: center;
          text-decoration: none;
          display: inline-block;
          font-size: 18px;
          margin: 4px 2px;
          -webkit-transition-duration: 0.8s; /* Safari */
          transition-duration: 0.8s;
          cursor: pointer;
          border: 2px solid #ffffff;
          }
          .button:hover {
          background-color: #00b964;
          color: #001c57;}

          .button a.appt {
          color: #ffffff;
          display: block;
          font-weight: bold;
          padding: 15px 32px;
          text-decoration: none;
          }

          </code>

          Comment


          • #6
            And here is the post, w/ the right function for "[code]"

            Code:
            }
            .button {
            border-radius: 4px;
            background-color: #001c57;
            color: white;
            padding: 15px 32px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 18px;
            margin: 4px 2px;
            -webkit-transition-duration: 0.8s; /* Safari */
            transition-duration: 0.8s;
            cursor: pointer;
            border: 2px solid #ffffff;
            }
            .button:hover {
            background-color: #00b964;
            color: #001c57;}
            
            .button a.appt {
            color: #ffffff;
            display: block;
            font-weight: bold;
            padding: 15px 32px;
            text-decoration: none;
            }

            Comment


            • #7
              You should be able to just do this:
              Code:
              .button a.appt {
                color: #ffffff;
                display: block;
                font-weight: bold;
                padding: 15px 32px;
                text-decoration: none;
              }
              .button a.appt:hover {
                color: blue; //didnt copy your hex :/ haha
              }
              When you reference the .button class, you are only calling the div. What you are wanting to change is the color of the <a> tag, so you need to also include that in your CSS. Hope that makes sense.
              Riley
              Riley-Shannon.com - My Portfolio
              FraktalServices.com - My Company

              Comment


              • #8
                Originally posted by RShannon1321 View Post
                You should be able to just do this:
                Code:
                .button a.appt {
                  color: #ffffff;
                  display: block;
                  font-weight: bold;
                  padding: 15px 32px;
                  text-decoration: none;
                }
                .button a.appt:hover {
                  color: blue; //didnt copy your hex :/ haha
                }
                When you reference the .button class, you are only calling the div. What you are wanting to change is the color of the <a> tag, so you need to also include that in your CSS. Hope that makes sense.
                Thanks for your help!

                Comment

                Working...
                X