Effect on my button on hover and it is aligned

HTML & CSS
1

Good morning

I would like to make an effect on my button “donate” on hover and have it aligned with my other button

Can you help me?

Thanks to you

html code

<center>
       <a href="" class="blockoPayBtn" data-toggle="modal" data-uid="a48e713c51ff4222">
            <img width="160" src="./img/donate.png">
       </a>
            <script src="https://www.blockonomics.co/js/pay_button.js"></script>
  </center>
  </div>
        <div class="ditails">
            <h2>test<span>xxxxx</span> xxxxxxx</h2>
                <p>
                  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
                </p>
                <a href="https://test.be/"><button>See the Project</button></a>
        </div>

css

button {
    display: inline-block;
    padding: 15px 25px;
    margin: 0px 50px;
    font-size: 24px;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    outline: none;
    color: white;
    background-color: var(--prime-color);
    border: none;
    border-radius: 15px;
}

button:hover {
    background-color: #808080;
}
2

It is unclear to what you are referring exactly?

You don’t have a button called ‘donate’ but you do have an image in an anchor and the image has a filename called donate.png. is this the donate button you mention?

However you do have an actual button element on the page but that button is not called donate but has text that says “See The Project”.

Which one are you referring to and which one should be aligned with which :?:slight_smile:

Note that the donate.png is an image and you can’t change the background color of that image because its an image. You’d have to swap it for another image.

Also note (and I have mentioned this before) that the following is invalid and unlikely to work cross browser.

<a href="https://test.be/"><button>See the Project</button></a>

You cannot nest a button element inside an anchor (or vice versa). Both have distinct purposes. It would be like nesting a link inside a link or a button inside a button. It’s nonsense as far as html is concerned.

If its a link then use a link.

e.g.

See the Project

You can of course style it like a button if needed.

.button {
    display: inline-block;
    padding: 15px 25px;
    margin: 0px 50px;
    font-size: 24px;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    outline: none;
    color: white;
    background-color: var(--prime-color);
    border: none;
    border-radius: 15px;
}

.button:hover {
    background-color: #808080;
}

Lastly note that the center tag was deprecated about 20 years ago and should not be used (theoretically (although unlikely) it could stop working at any time). You should instead use CSS to centre elements as required.

e.g. remove the center tag and centre the anchor holding the image.

.blockoPayBtn{
  display:table;
  margin:auto;
}

If you can clarify all the above then I will be glad to advise a course of action :wink:

1 Like
3

Thank you for your response.
That’s good, I would like for example to have an effect on the image, for example to make it move, is it possible?

It’s true that my center tag is not great

4

You can change the background of a PNG image that has some transparency.

Demo here on my free webspace:
http://create.mywebcommunity.org/donate1.html

2 Likes
5

Yes of course :slight_smile:

I was referring to the pink color rather than the space around (which seems odd anyway).

I know you can also do some clever things with filters but the results can vary.

2 Likes
6

Another possibility with black background on hover:

http://create.mywebcommunity.org/donate2.html

2 Likes
7

@Archibald has shown some good effects on his demo.

If you want to make it move then yes you can use transitions or animations as you wish.

Here’s a couple of very basic examples.

2 Likes
8

a big thank you to all of you for your help

1 Like