1. First, we need fresh reactjs setup, and for that, we need to run below commands into out terminal, and also we should have latest node version installed on our system:
npx create-react-app my-awesome-project
cd my-awesome-project
npm start
2. Now we need to run below commands into our project terminal to get bootstrap and related modules into our reactjs application:
npm install [email protected] --save
npm start //For start project again
3. Finally for the main output, we need to add below code into our my-awesome-project/src/App.js file or if you have fresh setup then you can replace my-awesome-project/src/App.js file code with below code:
import React from 'react';
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
function App() {
return (
<div>
<div class="container bootstrap snippets bootdeys">
<button class="btn btn-info wave in">Button</button>
<button class="btn btn-primary wave in">Button</button>
<button class="btn btn-danger wave in bd-danger">Button</button>
<button class="btn btn-warning wave in">Button</button>
<button class="btn btn-default wave in">Button</button>
</div>
</div>
);
}
export default App;
4. Now we need to add below code into our my-awesome-project/src/App.css file :
body{
margin-top:20px;
background: #2dc3e8;
}
@-webkit-keyframes wave {
5% {
opacity: .6;
}
27% {
-webkit-transform: scale(1.8);
opacity: 0;
}
100% {
opacity: 0;
}
}
@-moz-keyframes wave {
5% {
opacity: .6;
}
27% {
-moz-transform: scale(1.8);
opacity: 0;
}
100% {
opacity: 0;
}
}
@-o-keyframes wave {
5% {
opacity: .6;
}
27% {
-o-transform: scale(1.8);
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes wave {
5% {
opacity: .6;
}
27% {
-webkit-transform: scale(1.8);
-moz-transform: scale(1.8);
-ms-transform: scale(1.8);
transform: scale(1.8);
opacity: 0;
}
100% {
opacity: 0;
}
}
.wave.in {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.wave.in:after {
content: "";
top: 3px;
left: 5px;
position: absolute;
width: 50px;
height: 50px;
background-image: 8121991;
background-image: -webkit-radial-gradient(center center, farthest-side circle, rgba(26, 175, 93, 0) 70%, #f5f5f5 100%);
background-image: -moz-radial-gradient(center center, farthest-side circle, rgba(26, 175, 93, 0) 70%, #f5f5f5 100%);
background-image: -o-radial-gradient(center center, farthest-side circle, rgba(26, 175, 93, 0) 70%, #f5f5f5 100%);
background-image: radial-gradient(center center, farthest-side circle, rgba(26, 175, 93, 0) 70%, #f5f5f5 100%);
border: 4px solid #fff;
-webkit-animation: wave 3s 1s infinite linear;
-moz-animation: wave 3s 1s infinite linear;
-o-animation: wave 3s 1s infinite linear;
animation: wave 3s 1s infinite linear;
zoom: 1;
filter: alpha(opacity=0);
-webkit-opacity: 0;
-moz-opacity: 0;
opacity: 0;
-webkit-border-radius: 50%;
-webkit-background-clip: padding-box;
-moz-border-radius: 50%;
-moz-background-clip: padding;
border-radius: 50%;
background-clip: padding-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.bd-danger{
}