<button disabled={disableIt} className="enabled:transition enabled:transform enabled:hover:translate-x-1 enabled:hover:blue-300" > Click me </button> -dybzon 如果您只使用<button>,这是一个很好的选择。请注意:它不适用于<a>链接。- clem
shadow-lg tw-transition tw-duration-150 tw-ease-in-out",delete:"tw-inline-block tw-px-6 tw-py-2.5 tw-bg-red-600 tw-text-white tw-font-medium tw-leading-tight tw-uppercase tw-rounded tw-shadow-md hover:tw-bg-red-700 hover:tw-shadow-lg focus:tw-bg-red-700 focus:tw-shadow-lg f...
scale-90 hover:text-white hover:font-medium"> Hover me :) </button> </div> <div> <button class="bg-green-500 rounded-3xl p-4 w-44 transition-transform delay-1000 ease-linear hover:scale-90 hover:text-white hover:font-medium"> Hover me :) </button> </div> </div> </body> <...
<button class="bg-gray-100 px-4 py-2 rounded-lg"> 展开菜单 </button> <div class="absolute top-full left-0 mt-2 w-48 bg-white rounded-lg shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 transform origin-top scale-95 group-hover:sca...
"transition hover:-translate-y-0.5 motion-reduce:transition-none motion-reduce:hover:translate-y-0 ..."> Save changes</button><!-- Using `motion-safe` is less code in these situations --><button class="motion-safe:transition motion-safe:hover:-translate-x-0.5 ...">Save changes</button...
outline button <buttonclass="outline-none mr-1 mb-1 border border-solid border-red-500 rounded px-4 py-2 bg-transparent text-xs text-red-500 font-bold uppercase focus:outline-none active:bg-red-600 hover:bg-red-600 hover:text-white"style="transition:all .15s ease"> ...
<button :class="classes" > <slot :iconSizeClasses="iconSizeClasses" /> script tag <script setup> import { toRefs, computed } from 'vue' const baseClasses = [ 'inline-flex items-center transition-colors font-medium select-none disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none...
<buttonclass="transform transition hover:-translate-y-1motion-reduce:transition-nonemotion-reduce:hover:transform-none..."><!-- ... --></button> Using a custom value Use thetransition-[<value>]syntaxto set thetransition propertiesbased on a completely custom value: ...
Button <button class="rounded-md bg-slate-800 py-2 px-4 border border-transparent text-center text-sm text-white transition-all shadow-md hover:shadow-lg focus:bg-slate-700 focus:shadow-none active:bg-slate-700 hover:bg-slate-700 active:shadow-none disabled:pointer-events-none disabled:...
duration-1000transition-duration: 1000ms; 使用 使用duration-{amount}功能来控制元素的过渡持续时间。 <buttonclass="transitionduration-150ease-in-out ...">Hover me</button><buttonclass="transitionduration-300ease-in-out ...">Hover me</button><buttonclass="transitionduration-700ease-in-out ..."...