siimee/frontend/src/views/Register.vue

<template lang="pug">
.register__box
    h2 Register
    form(@submit.prevent='onSubmit')
        .user__box
            input(
                minlength='5'
                required=''
                type='text'
                v-model='form.fullname'
            )
            label Fullname
        .user__box
            input(minlength='10' required='' type='email' v-model='form.email')
            label Email
        .user__box
            input(
                minlength='6'
                required=''
                type='password'
                v-model='form.password'
            )
            label Password
        .user__box
            router-link.forget__link(to='/forget') Forget Password
        button(type='submit')
            span
            span
            span
            span {{ requesting ? "Log..." : "Register" }}
        router-link.links(to='/login') Login
</template>

<script>
export default {
    data: () => ({
        valid: true,
        requesting: false,
        form: {
            email: '',
            password: '',
            fullname: '',
        },
    }),
    methods: {
        onSubmit() {
            this.requesting = true
            this.requesting = false
        },
    },
}
</script>

<style lang="postcss">
html
  background-color: #e90d77

.content
  background: none

.wrapper
  position: unset

.register__box
  position: absolute
  top: 50%
  left: 50%
  width: 300px
  padding: 40px
  transform: translate(-50%, -50%)
  background: rgba(0, 0, 0, 0.5)
  box-sizing: border-box
  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.6)
  border-radius: 10px

.register__box h2
  margin: 0 0 30px
  padding: 0
  color: #fff
  text-align: center

.register__box .user__box
  position: relative

.register__box .user__box input
  width: 100%
  padding: 10px 0
  font-size: 16px
  color: #fff
  margin-bottom: 30px
  border: none
  border-bottom: 1px solid #fff
  outline: none
  background: transparent

.register__box .user__box label
  position: absolute
  top: 0
  left: 0
  padding: 10px 0
  font-size: 16px
  color: #fff
  pointer-events: none
  transition: 0.5s

.register__box .user__box input:focus ~ label,
.register__box .user__box input:valid ~ label
  top: -20px
  left: 0
  color: #e90d77
  font-size: 12px

.register__box form button
  position: relative
  display: inline-block
  padding: 10px 20px
  color: #e90d77
  font-size: 16px
  text-decoration: none
  text-transform: uppercase
  overflow: hidden
  transition: 0.5s
  margin-top: 40px
  letter-spacing: 4px
  background: none
  border: none

.register__box button:hover
  background: #e90d77
  color: #fff
  border-radius: 5px
  box-shadow: 0 0 5px #e90d77, 0 0 25px #e90d77, 0 0 50px #e90d77,
    0 0 100px #e90d77

.register__box button span
  position: absolute
  display: block

.register__box button span:nth-child(1)
  top: 0
  left: -100%
  width: 100%
  height: 2px
  background: linear-gradient(90deg, transparent, #e90d77)
  animation: btn-anim1 1s linear infinite

.register__box form .forget__link
  color: white
  text-decoration: none

.register__box form .forget__link:hover
  color: #e90d77

.register__box form .links
  color: white
  text-decoration: none
  margin-left: 5px
  padding: 10px

.register__box form .links:hover
  background: #e90d77
  color: #fff
  border-radius: 5px
  box-shadow: 0 0 5px #e90d77, 0 0 25px #e90d77, 0 0 50px #e90d77, 0 0 100px #e90d77

@keyframes btn-anim1
  0%
    left: -100%
  50%, 100%
    left: 100%

.register__box button span:nth-child(2)
  top: -100%
  right: 0
  width: 2px
  height: 100%
  background: linear-gradient(180deg, transparent, #e90d77)
  animation: btn-anim2 1s linear infinite
  animation-delay: 0.25s

@keyframes btn-anim2
  0%
    top: -100%
  50%, 100%
    top: 100%

.register__box button span:nth-child(3)
  bottom: 0
  right: -100%
  width: 100%
  height: 2px
  background: linear-gradient(270deg, transparent, #e90d77)
  animation: btn-anim3 1s linear infinite
  animation-delay: 0.5s

@keyframes btn-anim3
  0%
    right: -100%
  50%, 100%
    right: 100%

.register__box a span:nth-child(4)
  bottom: -100%
  left: 0
  width: 2px
  height: 100%
  background: linear-gradient(360deg, transparent, #e90d77)
  animation: btn-anim4 1s linear infinite
  animation-delay: 0.75s

@keyframes btn-anim4
  0%
    bottom: -100%
  50%,
  100%
    bottom: 100%
</style>