Notus Design System PRO by Creative Tim

Button

Social colors 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-linkedin-regular border-linkedin-regular active:bg-linkedin-active active:border-linkedin-active text-sm px-6 py-2 shadow hover:shadow-lg rounded-md">linkedin</button>
</div>

Button

Social colors and small 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-linkedin-regular border-linkedin-regular active:bg-linkedin-active active:border-linkedin-active text-xs px-3 py-2 shadow hover:shadow-md rounded-md">linkedin</button>
</div>

Button

Social colors and large 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-linkedin-regular border-linkedin-regular active:bg-linkedin-active active:border-linkedin-active text-sm px-6 py-3 shadow-md hover:shadow-lg rounded-lg">linkedin</button>
</div>

Button

Social 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-linkedin-regular border-linkedin-regular active:bg-linkedin-active active:border-linkedin-active active:text-white text-sm px-6 py-2 shadow hover:shadow-lg rounded-md">linkedin</button>
</div>

Button

Social colors, small 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-linkedin-regular border-linkedin-regular active:bg-linkedin-active active:border-linkedin-active active:text-white text-xs px-3 py-2 shadow hover:shadow-md rounded-md">linkedin</button>
</div>

Button

Social 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-linkedin-regular border-linkedin-regular active:bg-linkedin-active active:border-linkedin-active active:text-white text-sm px-6 py-3 shadow-md hover:shadow-lg rounded-lg">linkedin</button>
</div>

Button

Social 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-linkedin-regular border-linkedin-regular active:bg-linkedin-active active:border-linkedin-active text-sm px-6 py-2 shadow hover:shadow-lg rounded-md w-full text-center">linkedin</button>
</div>

Button

Social 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-linkedin-regular border-linkedin-regular active:bg-linkedin-active active:border-linkedin-active text-xs px-3 py-2 shadow hover:shadow-md rounded-md w-full text-center">linkedin</button>
</div>

Button

Social 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-linkedin-regular border-linkedin-regular active:bg-linkedin-active active:border-linkedin-active text-sm px-6 py-3 shadow-md hover:shadow-lg rounded-lg w-full text-center">linkedin</button>
</div>

Button

Social 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-linkedin-regular border-linkedin-regular active:bg-linkedin-active active:border-linkedin-active active:text-white text-sm px-6 py-2 shadow hover:shadow-lg rounded-md w-full text-center">linkedin</button>
</div>

Button

Social 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-linkedin-regular border-linkedin-regular active:bg-linkedin-active active:border-linkedin-active active:text-white text-xs px-3 py-2 shadow hover:shadow-md rounded-md w-full text-center">linkedin</button>
</div>

Button

Social 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-linkedin-regular border-linkedin-regular active:bg-linkedin-active active:border-linkedin-active active:text-white text-sm px-6 py-3 shadow-md hover:shadow-lg rounded-lg w-full text-center">linkedin</button>
</div>

PresentationComponents

Social Buttons

Button

Button

Button

Button

Button

Button

Button

Button

Button

Button

Button

Button