如何使用css和js创建被动波浪效果按钮

Question

I know that there are lot of questions similar to this but what I want is more particular.

I came up on a site recently and I really want to know the code how to create similar button wave effect. This wave effect looks like even the border and text color is changing after every particular interval of time.

The site i'm talking about is https://www.revcontent.com/ . The Signup button effect on the navbar is the one which I want.

And also I want to know one more type of button effect.

This is something which I wanted to have when CSGO game new template/theme was released.

Answer 1

You mentioned text color is changing after every particular interval of time. With CSS animations, you can get a "basic start" down this road.

I'm not sure of your level of coding, but take a look at transitions

To create a transition effect, you must specify two things:

• the CSS property you want to add an effect to
• the duration of the effect

Here is a simple example based on an event (ie someone hovers over it) which then changes its color and size over time. You can do the same thing and give a similar "illusion" to your original diagram in your post.

The HTML element:

<span class="slider"></span>

The CSS:

.slider {
  display: block;
  height: 25px;
  width: 0;
  background-color: black;
  transition: 0.25s ease;
 }

 .slider:hover {
   width: 100%;
   background-color: green;
 }

From this point, explore your CSS options with element colors, the text that is within the element itself, opacity effects, durations, all to come close to what you are showing us in your original diagram. Hope this helps.