Eu criei um botão e quero adicionar efeito cascata a esse botão!

Criei um arquivo XML de botão bg: (bg_btn.xml)

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<gradient android:startColor="#FFFFFF" android:endColor="#00FF00" android:angle="270" />
<corners android:radius="3dp" />
<stroke android:width="5px" android:color="#000000" />
</shape>

E este é o meu arquivo de efeito cascata: (ripple_bg.xml)

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:color="#f816a463"
    tools:targetApi="lollipop">
    <item android:id="@android:id/mask">
        <shape android:shape="rectangle">
            <solid android:color="#f816a463" />
        </shape>
    </item>
</ripple>

E este é o meu botão que eu quero adicionar efeito cascata:

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:id="@+id/button"
android:layout_centerHorizontal="true"
android:layout_marginTop="173dp"
android:textColor="#fff"
android:background="@drawable/ripple_bg"
android:clickable="true" />

Mas depois de adicionar o efeito cascata, o fundo do botão fica transparente e o botão é exibido apenas quando clicado, desta forma:

Antes de clicar

Ao clicar

Mas eu preciso da cor de fundo dos botões e do efeito cascata, encontrei parte desse código em diferentes blogs do Stack Overflow, mas ainda não está funcionando!