Gradient Button

import androidx.compose.animation.core.tween
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.style.animate
import androidx.compose.foundation.style.hovered
import androidx.compose.foundation.style.pressed
import androidx.compose.foundation.style.rememberUpdatedStyleState
import androidx.compose.foundation.style.styleable
import androidx.compose.foundation.text.BasicText
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.BlendMode
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.shadow.Shadow
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.DpOffset
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.composeunstyled.UnstyledButton

@Preview
@Composable
fun GradientButton() {
    val interactionSource = remember { MutableInteractionSource() }
    val styleState = rememberUpdatedStyleState(interactionSource)

    UnstyledButton(
        onClick = { /* TODO */ },
        interactionSource = interactionSource,
        modifier = Modifier
            .padding(10.dp)
            .styleable(styleState) {
                shape(RoundedCornerShape(40.dp))
                background(
                    Brush.linearGradient(
                        colors = listOf(Color(0xFF00C6FF), Color(0xFF0072FF)),
                    ),
                )
                dropShadow(
                    Shadow(
                        0.dp,
                        Color(0xFF0072FF),
                        0.dp,
                        DpOffset(0.dp, 4.dp),
                        1f,
                        BlendMode.SrcOver
                    )
                )

                hovered {
                    animate(tween(durationMillis = 200)) {
                        dropShadow(
                            Shadow(
                                0.dp,
                                Color(0xFF0072FF),
                                0.dp,
                                DpOffset(0.dp, 6.dp),
                                1f,
                                BlendMode.SrcOver
                            )
                        )
                    }
                }
                pressed {
                    animate(tween(durationMillis = 200)) {
                        translationY(0f)
                        background(
                            Brush.linearGradient(
                                colors = listOf(Color(0xFF0072FF), Color(0xFF00C6FF)),
                            ),
                        )
                        dropShadow(Shadow(0.dp))
                    }
                }
            },
    ) {
        BasicText(
            text = "BUTTON",
            style = TextStyle(
                color = Color.White,
                fontSize = 24.sp,
                fontWeight = FontWeight.Bold,
            ),
            modifier = Modifier.padding(horizontal = 28.dp, vertical = 12.dp),
        )
    }
}