Simple ripple effect in elm

ripple.elm

import Html exposing (..)
import Html.Events exposing (on)
import Html.Attributes exposing (..)
import Html.App as App
import Html.Keyed as Keyed
import Json.Decode as Json
import Mouse exposing (Position)
import List as List
import Time exposing (Time, second)

import Debug as Debug

(=>) =
    (,)

main =
  App.beginnerProgram
    { model = model
    , view = view
    , update = update
    }

-- MODEL
type alias Model = {
  ripples: List Position
}

model = {
  ripples = []
  }


-- UPDATE
type Msg = Remove | NewRipple Position

update : Msg -> Model -> Model
update msg model =
  case msg of
    NewRipple ripple ->
      Model (ripple :: model.ripples)
    Remove ->
      Debug.log "log" (Model (remove model.ripples))

remove : List a -> List a
remove xs =
  List.take (List.length xs - 1) xs



-- VIEW
view : Model -> Html Msg
view model = 
  button [click, style btnStyle](
     text "Hello" :: globalStyle :: (List.map rippleEffect (List.reverse model.ripples))
  )

rippleEffect : Position -> Html Msg
rippleEffect position =
  let
    x = (toString position.x) ++ "px"
    y = (toString position.y) ++ "px"
  in
    Keyed.node "div" [animationEnd, style (("top", y) :: ("left", x) :: rippleStyle)][]

--EVENTS
click : Attribute Msg
click =
  on "click" (Json.map NewRipple Mouse.position)

animationEnd : Attribute Msg
animationEnd =
  on "animationend" (Json.succeed Remove)

--STYLES
globalStyle = node "style" [type' "text/css"] [
    text "@keyframes ripple-animation { from { opacity: 0.4; transform: scale(1); } }"
  ]

btnStyle = [
  "position" => "relative",
  "border" => "none",
  "outline" => "none",
  "cursor" => "pointer",
  "background" => "#89669b",
  "color" => "white",
  "padding" => "18px 60px",
  "border-radius" => "2px",
  "font-size" => "22px",
  "overflow" => "hidden"
  ]

rippleStyle = [
  "position" => "absolute",
  "border-radius" => "50%",
  "width" => "1px",
  "height" => "1px",
  "background" => "white",
  "animation" => "ripple-animation 2s",
  "opacity" => "0.5",
  "transform" => "scale(70)"
  ]