Notus Design System PRO by Creative Tim

Button

Simple colors and regular size for the Button component.

Copied

<div class="w-full">
  <button class="inline-block outline-none focus:outline-none align-middle transition-all duration-150 ease-in-out uppercase border border-solid font-bold last:mr-0 mr-2  text-white bg-pink-500 border-pink-500 active:bg-pink-600 active:border-pink-600 text-sm px-6 py-2 shadow hover:shadow-lg rounded-md">pink</button>
</div>

Button

Simple colors and regular size for the Button component.

Copied

<div class="w-full">
  <button class="inline-block outline-none focus:outline-none align-middle transition-all duration-150 ease-in-out uppercase border border-solid font-bold last:mr-0 mr-2  text-white bg-pink-500 border-pink-500 active:bg-pink-600 active:border-pink-600 text-xs px-3 py-2 shadow hover:shadow-md rounded-md">pink</button>
</div>

Button

Simple colors and regular size for the Button component.

Copied

<div class="w-full">
  <button class="inline-block outline-none focus:outline-none align-middle transition-all duration-150 ease-in-out uppercase border border-solid font-bold last:mr-0 mr-2  text-white bg-pink-500 border-pink-500 active:bg-pink-600 active:border-pink-600 text-sm px-6 py-3 shadow-md hover:shadow-lg rounded-lg">pink</button>
</div>

Button

Simple colors, regular size and outline for the Button component.

Copied

<div class="w-full">
    <button class="inline-block outline-none focus:outline-none align-middle transition-all duration-150 ease-in-out uppercase border border-solid font-bold last:mr-0 mr-2  text-pink-500 border-pink-500 active:bg-pink-600 active:border-pink-600 active:text-white text-sm px-6 py-2 shadow hover:shadow-lg rounded-md">pink</button>
</div>

Button

Simple colors, regular size and outline for the Button component.

Copied

<div class="w-full">
  <button class="inline-block outline-none focus:outline-none align-middle transition-all duration-150 ease-in-out uppercase border border-solid font-bold last:mr-0 mr-2  text-pink-500 border-pink-500 active:bg-pink-600 active:border-pink-600 active:text-white text-xs px-3 py-2 shadow hover:shadow-md rounded-md">pink</button>
</div>

Button

Simple colors, large size and outline for the Button component.

Copied

<div class="w-full">
  <button class="inline-block outline-none focus:outline-none align-middle transition-all duration-150 ease-in-out uppercase border border-solid font-bold last:mr-0 mr-2  text-pink-500 border-pink-500 active:bg-pink-600 active:border-pink-600 active:text-white text-sm px-6 py-3 shadow-md hover:shadow-lg rounded-lg">pink</button>
</div>

Button

Simple colors, regular size and full width for the Button component.

Copied

<div class="w-full">
    <button class="inline-block outline-none focus:outline-none align-middle transition-all duration-150 ease-in-out uppercase border border-solid font-bold last:mr-0 mr-2  text-white bg-pink-500 border-pink-500 active:bg-pink-600 active:border-pink-600 text-sm px-6 py-2 shadow hover:shadow-lg rounded-md w-full text-center">pink</button>
</div>

Button

Simple colors, small size and full width for the Button component.

Copied

<div class="w-full">
  <button class="inline-block outline-none focus:outline-none align-middle transition-all duration-150 ease-in-out uppercase border border-solid font-bold last:mr-0 mr-2  text-white bg-pink-500 border-pink-500 active:bg-pink-600 active:border-pink-600 text-xs px-3 py-2 shadow hover:shadow-md rounded-md w-full text-center">pink</button>
</div>

Button

Simple colors, large size and full width for the Button component.

Copied

<div class="w-full">
  <button class="inline-block outline-none focus:outline-none align-middle transition-all duration-150 ease-in-out uppercase border border-solid font-bold last:mr-0 mr-2  text-white bg-pink-500 border-pink-500 active:bg-pink-600 active:border-pink-600 text-sm px-6 py-3 shadow-md hover:shadow-lg rounded-lg w-full text-center">pink</button>
</div>

Button

Simple colors, regular size, outline and full width for the Button component.

Copied

<div class="w-full">
  <button class="inline-block outline-none focus:outline-none align-middle transition-all duration-150 ease-in-out uppercase border border-solid font-bold last:mr-0 mr-2  text-pink-500 border-pink-500 active:bg-pink-600 active:border-pink-600 active:text-white text-sm px-6 py-2 shadow hover:shadow-lg rounded-md w-full text-center">pink</button>
</div>

Button

Simple colors, small size, outline and full width for the Button component.

Copied

<div class="w-full">
  <button class="inline-block outline-none focus:outline-none align-middle transition-all duration-150 ease-in-out uppercase border border-solid font-bold last:mr-0 mr-2  text-pink-500 border-pink-500 active:bg-pink-600 active:border-pink-600 active:text-white text-xs px-3 py-2 shadow hover:shadow-md rounded-md w-full text-center">pink</button>
</div>

Button

Simple colors, large size, outline and full width for the Button component.

Copied

<div class="w-full">
  <button class="inline-block outline-none focus:outline-none align-middle transition-all duration-150 ease-in-out uppercase border border-solid font-bold last:mr-0 mr-2  text-pink-500 border-pink-500 active:bg-pink-600 active:border-pink-600 active:text-white text-sm px-6 py-3 shadow-md hover:shadow-lg rounded-lg w-full text-center">pink</button>
</div>

PresentationComponents

Buttons

Button

Button

Button

Button

Button

Button

Button

Button

Button

Button

Button

Button