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:
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>