Animated CSS Button

I Need Help
1

Hi …
I read a few things about animated css buttons. But I am not sure how to do this in blocs. A short example …
They say add an anchor tag in the html and target the anchor tag with the css.
How to do this in blocs ? Because I don’t want to target all anchor tags.
Do I use the html bric and set an anchor tag ?
Or I use the link bric and set a class to this link and target the class with the css ? :see_no_evil:

Hope u understand. Hard to explain for me. Did anyone use an animated css button doing with html and css ?
Cheers Tom

2

You target with an ID or a class.

I’ve made tons of animated buttons. You can use the button bric in blocs in most cases.

I do suggest you add visual examples of what you are doing. Are you using CSS animation or an animation library?

3

@PeteSharp

I do not understand what is correct. To do all with html and css or for example use the button bric and use css …
Give me two minutes - I will try to copy the code

4

@PeteSharp
Not sure if you can see it. I am only at my Handy at the moment.
First example ( it’s not the complete code )
Add an anchor link and target the anchor and the pseudo before element with css …

IMG_3537
IMG_3537965×1049 86.4 KB

IMG_3536
IMG_3536940×598 37.8 KB

Second example. Add a button with a class and target the class and the before element with css …

IMG_3538
IMG_3538814×1081 55.3 KB

IMG_3540
IMG_3540835×954 71.4 KB

5

Hi Tom2:

Not sure what you are trying to accomplish, but I just use the built in button actions in Blocs.

Buttons
Buttons504×920 150 KB

Rich the Weather Guy

6

Hi @WeatherguyNH

Yes - there are a few cool animations. But I think there are a lot more :smiling_face: I just want to try and learn a little bit to do other animations
Thank u a lot

7

Use the button bric. Add a class and animate it.

I’ve done a few videos on Better Buttons on my YouTube channel. Check them out. It will give you an idea about the basics. I have more video coming when I get around to it :joy:

That code you show is going to style all links, I don’t think you want to do that. Use the code inspector and see the markup you already have with the buttons in blocs. 99% of what you have shown you can do without any code.

2 Likes
8

Hi @PeteSharp

Ok - the Button bric and the class is simple.
And with the link - that l what I wrote before. I don’t want to target all links :slight_smile:

Is there no way to target a specific link ?
I think with the element selector it must work. Maybe I am wrong ? It doesent matter if it’s a h1 , a , p etc …?

This is just any example from the video. There are 90 animated buttons. And the most examples they use the anchor tag and target the anchor tag.

U think 99 % in blocs ? But also with some css code ? Right ?

Is it good to mix it ? So use the button and the class editor and only do the transition with css ?