development hover animation

presets.js

@@ -224,7 +224,8 @@ module.exports = {
           transitionProperty: {
             'height': 'height',
             'spacing': 'margin, padding',
-            'visible': 'visible, opacity'
+            'visible': 'visible, opacity',
+            'backgroundSize': 'background-size'
           }
         },
 
@@ -232,6 +233,15 @@ module.exports = {
         container: {
             center: true,
         },
+
+        backgroundSize: {
+          '0-2': '0 2px',
+          'full-2': '100% 2px'
+        },
+
+        backgroundPosition: {
+          '0-full': ' 0 100%'
+        }
     },
 
     variants: {

resources/views/components/widgets/header.blade.php

@@ -7,7 +7,11 @@
 
         <div class="flex items-center">
             @if ($report = $class->getReportUrl())
-                <a href="{{ $report }}" class="text-purple text-sm mr-3 border-b border-transparent transition-all hover:border-purple hover:text-purple-700">{{ trans('widgets.view_report') }}</a>
+                <a href="{{ $report }}" class="text-purple text-sm mr-3">
+                    <span class="bg-no-repeat bg-0-2 bg-0-full hover:bg-full-2 bg-gradient-to-b from-transparent to-purple transition-backgroundSize">    
+                        {{ trans('widgets.view_report') }}
+                    </span>
+                </a>
             @endif
 
             <x-dropdown id="dropdown-widget-{{ $class->model->id }}">