Overlapping of Options

[SantanuNeoBera]

I have two buttons and one div. But the button is always taking the settings of the div. The color of button ripple is blue rather than green. I'm using Bulma component for Button style rendering.

<div style="display: flex; justify-content: center; align-items: center; height: 100px;">
<a style="margin-right: 10px;" class="button is-success">Hello
<a class="button is-default">Hi There !
</div>
<div style="display: flex; justify-content: center; align-items: center; height: 300px;">
<div style="width: 300px; height: 200px; background-color: rgba(0,0,0,0.7);" class="demoRipple">

		</div>
	</div>

$.ripple(".button",{
color : "green"
});
$.ripple(".demoRipple",{
color : "blue"
});