• Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

HTML & CSS I'm new and struggling with a simple button

JMForster

New Coder
Hello everyone. I'm new to this site and this is literally my first day struggling with HTML and CSS with NO formal training, so be easy on me.

I'm currently using Weebly as a site editor (don't laugh) and I'm running into limitations that I need to get around. The first is the two red buttons on the Home Screen www.PraxiTek.com. Weebly does not let me change the color of the buttons and I also wanted a "hover" effect to draw attention to them. To get around the problem, I'm using an HTML embedded object to create the buttons instead of the native button tool within Weebly.

Surprisingly I was able to get them to work, forwarding to their respective URL and making the "mouse over" function work. Currently I'm having trouble with three things:

1. The left button (Free Consult) is supposed to be blue. The color codes I embedded are for two shades of blue to accomplish the gradient switch with the mouse-over effect, but they are coming across as red which happens to be the exact same shade of red as the button to the Right (Get Support). How can this be?
2. I want the buttons to be a fixed length. How do I add code within this script to keep the buttons the same length? If you display on a cell phone, they go from being side by side, to being over / under and it's obvious that one is longer than the other.
3. Last issue, you will also see that the buttons are overlapping when viewed by a cell phone. How do I fix that? Is there a way to add a buffer around them?

Here's the code with the blue color codes. the other button is identical with red color codes that work:

HTML:
<a href=' https://calendly.com/jmforster/30min' target=' target='_self', class="css-button">FREE CONSULT</a>
<style>
.css-button {
    font-family: Arial;
    font-weight: bold;
    color: #FFFFFF;
    font-size: 16px;
    border-radius: 8px;
    border: 1px #3866a3 solid;
    padding: 10px 42px;
    background: linear-gradient(180deg, #77cae8 5%, #00a1c3 100%);
    text-shadow: 1px 1px 1px #528ecc;
    box-shadow: inset 1px 1px 2px 0px #bbdaf7;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
}
.css-button:hover {
    background: linear-gradient(180deg, #00a1c3 5%, #77cae8 100%);
}

</style>
 

Mutiny

Active Coder
For the first issue, you're using a class of .css-button for the button, but both buttons have the same class. It looks like somewhere on the page there's code targeting that button that has a red background, and due to the way the CSS is cascading down with its rules, that change is deemed to be more important than the change you have. I'm guessing the red is coming from Weebly somewhere.

In your HTML, add a new class of blue-button to your button like so:

Code:
<a href=' https://calendly.com/jmforster/30min' target=' target='_self', class="css-button blue-button">FREE CONSULT</a>

Then in your CSS add:

CSS:
.css-button.blue-button {
    background: linear-gradient(180deg, #77cae8 5%, #00a1c3 100%);
}

Then for the hover you would have:

CSS:
.css-button.blue-button:hover {
    background: linear-gradient(180deg, #00a1c3 5%, #77cae8 100%);
}

This code says that the blue background should only work on the button that has both the .css-button and .blue-button classes, which will make the rule more specific than the one that has the red background.

For the width, it looks like Weebly is putting some of its own markup around the button which may make adjusting the button width difficult. I tried it on your site using the browser's HTML / CSS inspector and changing the width just gives me a bigger button with a scrollbar beneath, which seems to be because of the table it is wrapped in. Are you able to put the two buttons in the same container where you can edit the HTML?

For the buttons touching on phone, you can add a margin-bottom: 10px; to your CSS code which will add 10px below each of the buttons, which will come in handy on mobile when they start to stack.
 

JMForster

New Coder
For the first issue, you're using a class of .css-button for the button, but both buttons have the same class. It looks like somewhere on the page there's code targeting that button that has a red background, and due to the way the CSS is cascading down with its rules, that change is deemed to be more important than the change you have. I'm guessing the red is coming from Weebly somewhere.

In your HTML, add a new class of blue-button to your button like so:

Code:
<a href=' https://calendly.com/jmforster/30min' target=' target='_self', class="css-button blue-button">FREE CONSULT</a>

Then in your CSS add:

CSS:
.css-button.blue-button {
    background: linear-gradient(180deg, #77cae8 5%, #00a1c3 100%);
}

Then for the hover you would have:

CSS:
.css-button.blue-button:hover {
    background: linear-gradient(180deg, #00a1c3 5%, #77cae8 100%);
}

This code says that the blue background should only work on the button that has both the .css-button and .blue-button classes, which will make the rule more specific than the one that has the red background.

For the width, it looks like Weebly is putting some of its own markup around the button which may make adjusting the button width difficult. I tried it on your site using the browser's HTML / CSS inspector and changing the width just gives me a bigger button with a scrollbar beneath, which seems to be because of the table it is wrapped in. Are you able to put the two buttons in the same container where you can edit the HTML?

For the buttons touching on phone, you can add a margin-bottom: 10px; to your CSS code which will add 10px below each of the buttons, which will come in handy on mobile when they start to stack.

Thank you Mutiny!

Took me a bit to study your advise and play with the code, but it is now working perfectly. Was even able to add the fixed width with a few adjustments to the "Spacers" that Weebly adds.

Here's what I ended up with:

Code:
<a href=' https://calendly.com/jmforster/30min' target=' target='_self', class="css-button blue-button">FREE CONSULT</a>
<style>
.css-button.blue-button {
    font-family: Arial;
    font-weight: bold;
    color: #FFFFFF;
    font-size: 16px;
    border-radius: 8px;
    border: 1px #3866a3 solid;
    padding: 10px 42px;
    background: linear-gradient(180deg, #77cae8 5%, #00a1c3 100%);
    text-shadow: 1px 1px 1px #528ecc;
    box-shadow: inset 1px 1px 2px 0px #bbdaf7;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
margin-bottom: 30px;
width: 125px;

}
.css-button.blue-button:hover {
    background: linear-gradient(180deg, #00a1c3 5%, #77cae8 100%);
}

</style>

I even used your advise to add a "Download" button on our remote support page: https://www.praxitek.com/remote.html

Again many thanks
 

JMForster

New Coder
Thank you Mutiny!

Took me a bit to study your advise and play with the code, but it is now working perfectly. Was even able to add the fixed width with a few adjustments to the "Spacers" that Weebly adds.

Here's what I ended up with:

Code:
<a href=' https://calendly.com/jmforster/30min' target=' target='_self', class="css-button blue-button">FREE CONSULT</a>
<style>
.css-button.blue-button {
    font-family: Arial;
    font-weight: bold;
    color: #FFFFFF;
    font-size: 16px;
    border-radius: 8px;
    border: 1px #3866a3 solid;
    padding: 10px 42px;
    background: linear-gradient(180deg, #77cae8 5%, #00a1c3 100%);
    text-shadow: 1px 1px 1px #528ecc;
    box-shadow: inset 1px 1px 2px 0px #bbdaf7;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
margin-bottom: 30px;
width: 125px;

}
.css-button.blue-button:hover {
    background: linear-gradient(180deg, #00a1c3 5%, #77cae8 100%);
}

</style>

I even used your advise to add a "Download" button on our remote support page: https://www.praxitek.com/remote.html

Again many thanks

Ahhh,

Just spotted another problem with the buttons. On all four computer browsers I'm looking at, the homepage buttons look fine. On a cell phone in portrait mode they look great. On a cell phone in landscape, the ends of both buttons is chopped. I tried adding a "margin-right" CSS line, but it didn't help.

See below picture:

Photo Oct 16, 8 25 06 PM.png

Thoughts, ideas?

Thanks again.
 

JMForster

New Coder
Ahhh,

Just spotted another problem with the buttons. On all four computer browsers I'm looking at, the homepage buttons look fine. On a cell phone in portrait mode they look great. On a cell phone in landscape, the ends of both buttons is chopped. I tried adding a "margin-right" CSS line, but it didn't help.

See below picture:

View attachment 1106

Thoughts, ideas?

Thanks again.


Haha,

I investigated further into your advise Mutiny about putting the two independent scripts into a single container, and bam. It's working in landscape on a mobile device too.

Hopefully no more problems. Hate wasting time on "buttons" of all things.

Joseph
 

JMForster

New Coder
Haha,

I investigated further into your advise Mutiny about putting the two independent scripts into a single container, and bam. It's working in landscape on a mobile device too.

Hopefully no more problems. Hate wasting time on "buttons" of all things.

Joseph

@Mutiny Now where would I start to write an html script that references two separate pictures with a hover effect? Is that even a thing?
 

Mutiny

Active Coder
Hey, sorry for not replying sooner. As far as the hover effect, you can do that in just HTML and CSS, no Javascript necessary. What you would do is have a div that has two img tags inside of it. Both images are the same size. Put a position: relative on the container div.

Then on the main image give it a class of default and on the hover image give it a class of hover. Then you would have something like:

HTML:
<div class="container">
    <img class="default" src="" />
    <img class="hover" src=""/>
</div>

And for CSS you could have:

CSS:
.container {
    position: relative;
}

.default {
    opacity: 1;
    transition: all 0.25s linear;
}

.hover {
    opacity: 0;
    transition: all 0.25s linear;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

.container:hover .default {
    opacity: 0;
}

.container:hover .hover {
    opacity: 1;
}

Haven't tested this code, but it should give you a cool cross-fade effect between the two images when you hover over the container.
 

Top