inserindo animação nos botões

Author: bernardoazevedo

resources/views/components/secondary-button.blade.php

@@ -1,5 +1,5 @@
 <button {{ $attributes->merge(['type' => 'button', 'class' => 'inline-flex items-center bg-white border border-stone-300 rounded-md font-semibold
-        text-xs text-stone-700 uppercase tracking-widest shadow-sm hover:bg-stone-50 focus:outline-none focus:ring-2 focus:ring-emerald-500
+        text-xs text-stone-700 uppercase tracking-widest shadow-sm hover:bg-stone-100 focus:outline-none focus:ring-2 focus:ring-emerald-500
         focus:ring-offset-2 disabled:opacity-25 transition ease-in-out duration-150']) }}>
     {{ $slot }}
 </button>

resources/views/components/text-input.blade.php

@@ -1,3 +1,4 @@
 @props(['disabled' => false])
 
-<input @disabled($disabled) {{ $attributes->merge(['class' => 'border-stone-300 focus:border-emerald-500 focus:ring-emerald-500 rounded shadow-sm hover:bg-stone-100 transition ease-in-out duration-150']) }}>
+<input @disabled($disabled) {{ $attributes->merge(['class' => 'border-stone-300 focus:border-emerald-500 focus:ring-emerald-500 rounded shadow-sm hover:bg-stone-100
+    transition ease-in-out duration-150']) }}>

resources/views/content/partials/write-content.blade.php

@@ -6,7 +6,8 @@
 
     <div id="replicated-value" class="grow-wrap dont-break-out">
         <textarea id="text" name="text" type="text" rows="27" cols=""
-            class="p-4 block w-full rounded-b border-white focus:border-emerald-500 focus:ring-emerald-500 focus:border-1 transition ease-in-out duration-150"
+            class="p-4 block w-full rounded-b border-white focus:border-emerald-500 focus:ring-emerald-500 focus:border-1 transition
+            ease-in-out duration-150 placeholder-stone-400"
             required autofocus autocomplete="text" placeholder="Type here"
             onInput="this.parentNode.dataset.replicatedValue = this.value"></textarea>
     </div>

resources/views/layouts/footer.blade.php

@@ -2,11 +2,21 @@
     <div class="flex gap-2 flex-wrap sm:w-auto p-3 justify-center">
         <x-text-input name="filename" id="filename" placeholder="Filename" class="grow max-w-md h-10"></x-text-input>
 
-        <x-callToAction-button class="max-w-fit h-10 gap-2">
-            <span>Download</span>
-            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3" />
-            </svg>
+        <x-callToAction-button class="group relative h-10 overflow-hidden">
+            <span class="relative inline-flex">
+                <span class="duration-700 [transition-delay:0.02s] group-hover:[transform:rotateY(360deg)] py-1">D</span>
+                <span class="duration-700 [transition-delay:0.04s] group-hover:[transform:rotateY(360deg)] py-1">o</span>
+                <span class="duration-700 [transition-delay:0.06s] group-hover:[transform:rotateY(360deg)] py-1">w</span>
+                <span class="duration-700 [transition-delay:0.08s] group-hover:[transform:rotateY(360deg)] py-1">n</span>
+                <span class="duration-700 [transition-delay:0.10s] group-hover:[transform:rotateY(360deg)] py-1">l</span>
+                <span class="duration-700 [transition-delay:0.12s] group-hover:[transform:rotateY(360deg)] py-1">o</span>
+                <span class="duration-700 [transition-delay:0.14s] group-hover:[transform:rotateY(360deg)] py-1">a</span>
+                <span class="duration-700 [transition-delay:0.16s] group-hover:[transform:rotateY(360deg)] py-1">d</span>
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
+                      class="duration-700 [transition-delay:0.16s] group-hover:[transform:rotateY(360deg)] ml-2 size-5">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3" />
+                </svg>
+            </span>
         </x-callToAction-button>
     </div>
 </footer>

resources/views/layouts/navigation.blade.php

@@ -2,17 +2,28 @@
     <!-- Primary Navigation Menu -->
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <div class="flex justify-between items-center h-16 text-stone-700">
-            <a href="{{ config('app.url') }}" class="flex items-center gap-1">
+            {{-- <a href="{{ config('app.url') }}" class="flex items-center gap-1">
                 <img src="{{ asset('assets/images/favicon.svg') }}" alt="md2pdf logo" width="40px" height="40px">
                 <span class="font-bold text-lg">{{ config('app.name', 'Markdown Editor') }}</span>
+            </a> --}}
+
+            <a href="{{ config('app.url') }}" class="flex items-center gap-1 group relative justify-center overflow-hidden transition hover:scale-105">
+                <img src="{{ asset('assets/images/favicon.svg') }}" alt="md2pdf logo" width="40px" height="40px">
+                <span class="font-bold text-lg">{{ config('app.name', 'Markdown Editor') }}</span>
+                <div class="absolute inset-0 flex h-full w-full justify-center [transform:skew(-12deg)_translateX(-100%)] group-hover:duration-1000 group-hover:[transform:skew(-12deg)_translateX(100%)]">
+                    <div class="relative h-full w-8 bg-black/20"></div>
+                </div>
             </a>
 
             <h1 class="text-lg font-semibold hidden sm:block">Edit text in markdown and convert to PDF</h1>
 
-            <a href="https://github.com/bernardoazevedo/markdownEditor" target="_blank">
-                <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="40px" height="40px" viewBox="0,0,256,256">
-                    <g fill="#44403c" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g transform="scale(8.53333,8.53333)"><path d="M15,3c-6.627,0 -12,5.373 -12,12c0,5.623 3.872,10.328 9.092,11.63c-0.056,-0.162 -0.092,-0.35 -0.092,-0.583v-2.051c-0.487,0 -1.303,0 -1.508,0c-0.821,0 -1.551,-0.353 -1.905,-1.009c-0.393,-0.729 -0.461,-1.844 -1.435,-2.526c-0.289,-0.227 -0.069,-0.486 0.264,-0.451c0.615,0.174 1.125,0.596 1.605,1.222c0.478,0.627 0.703,0.769 1.596,0.769c0.433,0 1.081,-0.025 1.691,-0.121c0.328,-0.833 0.895,-1.6 1.588,-1.962c-3.996,-0.411 -5.903,-2.399 -5.903,-5.098c0,-1.162 0.495,-2.286 1.336,-3.233c-0.276,-0.94 -0.623,-2.857 0.106,-3.587c1.798,0 2.885,1.166 3.146,1.481c0.896,-0.307 1.88,-0.481 2.914,-0.481c1.036,0 2.024,0.174 2.922,0.483c0.258,-0.313 1.346,-1.483 3.148,-1.483c0.732,0.731 0.381,2.656 0.102,3.594c0.836,0.945 1.328,2.066 1.328,3.226c0,2.697 -1.904,4.684 -5.894,5.097c1.098,0.573 1.899,2.183 1.899,3.396v2.734c0,0.104 -0.023,0.179 -0.035,0.268c4.676,-1.639 8.035,-6.079 8.035,-11.315c0,-6.627 -5.373,-12 -12,-12z"></path></g></g>
+            <a href="https://github.com/bernardoazevedo/markdownEditor" target="_blank"
+                class="relative select-none cursor-pointer flex items-center justify-center w-12 h-12 bg-white text-black font-bold rounded-xl transition-all
+                duration-300 ease-in-out group overflow-hidden hover:w-36">
+                <svg class="absolute transition-transform duration-300 ease-in-out group-hover:-translate-x-12" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" width="24" height="24">
+                    <path d="M12 .297C5.373.297 0 5.67 0 12.297c0 5.305 3.438 9.8 8.205 11.4.6.111.82-.261.82-.577 0-.287-.011-1.25-.017-2.28-3.338.724-4.042-1.608-4.042-1.608-.546-1.386-1.333-1.756-1.333-1.756-1.091-.745.083-.73.083-.73 1.207.085 1.839 1.237 1.839 1.237 1.071 1.836 2.809 1.303 3.492.996.108-.775.419-1.303.761-1.603-2.665-.303-5.466-1.334-5.466-5.93 0-1.313.469-2.387 1.236-3.228-.125-.303-.535-1.53.117-3.175 0 0 1.008-.323 3.302 1.23a11.563 11.563 0 0 1 3.002-.404c1.022.004 2.052.139 3.002.404 2.294-1.553 3.302-1.23 3.302-1.23.652 1.645.243 2.872.118 3.175.77.841 1.236 1.915 1.236 3.228 0 4.607-2.805 5.624-5.474 5.92.431.372.815 1.102.815 2.224 0 1.604-.014 2.896-.014 3.287 0 .316.22.694.825.577C20.563 22.097 24 17.602 24 12.297 24 5.67 18.627.297 12 .297z"></path>
                 </svg>
+                <span class="pl-0 text-sm uppercase opacity-0 transition-opacity ease-in group-hover:opacity-100 group-hover:duration-500">Github</span>
             </a>
         </div>
     </div>