DEV Community

Mysterio
Mysterio

Posted on • Updated on

Tailwindcss and React Icons (Beautiful Buttons)

Hello Guyz today I am going to show you how you can use gradient colors to create beautiful buttons with tailwind css and React icons

First Run these commands -

npm install react-icons --save
npm install -D tailwindcss
npx tailwindcss init
Enter fullscreen mode Exit fullscreen mode

Then Add this CDN -

<script src="https://cdn.tailwindcss.com"></script>
Enter fullscreen mode Exit fullscreen mode

Lets Get Started -

Example 1 -

import React from 'react';
import { FaSearchengin } from 'react-icons/fa'

function App() {
  const buttonStyling = `flex space-x-3 mr-2 font-semibold bg-gradient-to-r from-blue-600 via-indigo-700 to-indigo-900 
  text-gray-100 rounded-sm ring-2 ring-blue-200 px-6 py-2 
  hover:bg-white  hover:text-white hover:ring-slate-300 mx-8`;

  return (
    <div className='bg-slate-800 p-20'>
      <div className='grid grid-cols-1 place-items-center'>
        <button
          type='submit'
          className={buttonStyling}>
          <p>Search</p>
          <FaSearchengin size='1.5rem' />
        </button>
      </div>
    </div>
  )
}

export default App
Enter fullscreen mode Exit fullscreen mode

OUTPUT -

Image description

Example 2 -

import React from 'react';
import { FaSearchengin } from 'react-icons/fa'

function App() {
  const buttonStyling = `flex space-x-3 mr-2 font-semibold bg-gradient-to-r from-indigo-600 to-pink-500
  text-gray-100 rounded-sm ring-2 ring-purple-400 px-6 py-2 
  hover:bg-white  hover:text-white hover:ring-slate-300 mx-8 shadow-lg shadow-indigo-300/50`;

  return (
    <div className='bg-slate-800 p-20'>
      <div className='grid grid-cols-1 place-items-center'>
        <button
          type='submit'
          className={buttonStyling}>
          <p>Search</p>
          <FaSearchengin size='1.5rem' />
        </button>
      </div>
    </div>
  )
}

export default App
Enter fullscreen mode Exit fullscreen mode

OUTPUT-

Image description

Example - 3

import React from 'react';
import { MdUnsubscribe } from 'react-icons/md'

function App() {
  const buttonStyling = `flex space-x-3 mr-2 font-semibold bg-gradient-to-r from-slate-500 via-slate-700 to-slate-900
  text-gray-100 rounded-md ring-2 ring-slate-400 px-6 py-2 
  hover:bg-white hover:text-white hover:ring-slate-300 mx-8 shadow-lg shadow-slate-800/100`;

  return (
    <div className='bg-slate-100 p-20'>
      <div className='grid grid-cols-1 place-items-center'>
        <button
          type='submit'
          className={buttonStyling}>
          <p>Subscribe</p>
          <MdUnsubscribe size="1.7rem" />
        </button>
      </div>
    </div>
  )
}

export default App
Enter fullscreen mode Exit fullscreen mode

OUTPUT -

Image description

Thats how you can use gradient color in Tailwind and along with that use react icons to create beautiful buttons.

Thats it for this post.
THANK YOU FOR READING THIS POST AND IF YOU FIND ANY MISTAKE OR WANTS TO GIVE ANY SUGGESTION , PLEASE MENTION IT IN THE COMMENT SECTION.
^^You can help me by some donation at the link below Thank you👇👇 ^^
☕ --> https://www.buymeacoffee.com/waaduheck <--

Also check these posts as well
https://dev.to/shubhamtiwari909/waadu-css-a-mini-framework-4bfi

https://dev.to/shubhamtiwari909/styled-componenets-react-js-15kk

https://dev.to/shubhamtiwari909/introduction-to-tailwind-best-css-framework-1gdj

Discussion (0)