CODEWITHSUNDEEP
javascriptreactjsuser-interfacebuttonmaterial-design
Brian Nieto
Brian Nieto

Reputation: 283

How can i use floating button in my react web site?

I want to hide and show a sidebar using a floating button in my React Website, and i have no idea how to do it.

I tried to use react-floating-action-button but then i realize that is a React Native component, not a web one and it doesn't works to me.

Exists another component library or a way to do it using reactstrap or something like that?

Upvotes: 1

Views: 10150

Answers (3)

Muhammed Moussa
Muhammed Moussa

Reputation: 5195

you can use tailwindcss:

<script src="https://cdn.tailwindcss.com"></script>

<style>
  body {
  background-color: gray;
  height: 100vh;
}
</style>

<button title="Contact Sale" class="fixed z-90 bottom-10 right-8 bg-blue-600 w-20 h-20 rounded-full drop-shadow-lg flex justify-center items-center text-white text-4xl hover:bg-blue-700 hover:drop-shadow-2xl hover:animate-bounce duration-300" > &#9993; </button>

Upvotes: 0

ravibagul91
ravibagul91

Reputation: 20765

I tried to use react-floating-action-button but then i realize that is a React Native component, not a web one and it doesn't works to me.

I think this statement is not correct, you can use react-floating-action-button with web also.

Demo

Note: You need to properly set the font-awesome, to get the icons.

Upvotes: 0

Byte IT Antwerpen
Byte IT Antwerpen

Reputation: 63

Have you tried ant design for React? Have a look at its Drawer component.

Once you implement it. It will be easy to make the button float wherever you want on the page with plain css.

Upvotes: 1

Related Questions