Color property of Vuetify 3 button applied to text not button

I'm making a login form in Vuetify 3 as per this tutorial.

I added color="success to one and color="info" to the other, expecting the buttons themselves to change colour, like in the tutorial (I think the lecturer is using Vuetify 2 though).

However, in my component, the buttons have no colour (except on hover) and the color prop affects the text inside the button (I wanted white text and the colour on the buttons themselves):

I searched the docs but can't find any answer, does anyone know why this happened?

Of course I can change the colour myself using a CSS rule but does that not defeat the purpose of using Vuetify somewhat?

Here is my code. I understand that it's not necessary to make an entire project for one component, but I wanted to practice making projects (and also make a re-usable login component!).

<template>
  <v-app>
    <v-card width="400" class="mx-auto mt-5">
      <v-card-title class="my-5">
        <h1 class="display-1">Login</h1>
      </v-card-title>
      <v-card-text>
        <v-form>
          <v-text-field label="Username" prepend-icon="mdi-account-circle" />
          <v-text-field
            :type="showPassword ? 'text' : 'password'"
            label="Password"
            prepend-icon="mdi-lock"
            :append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
            @click:append="showPassword = !showPassword"
          />
        </v-form>
      </v-card-text>
      <v-divider></v-divider>
      <v-card-actions>
        <v-btn class="register" color="success" elevation="2">Register</v-btn>
        <v-spacer></v-spacer>
        <v-btn class="login" color="info" elevation="2">Login</v-btn>
      </v-card-actions>
    </v-card>
  </v-app>
</template>

<script>
export default {
  name: "App",

  components: {},

  data: () => ({
    showPassword: false,
  }),
};
</script>

<style>
* {
  caret-color: transparent;
}
</style>

Thanks

Try with variant="elevated" or variant="flat"

more here