<div id="root"></div> body{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.circle{
width:150px;
height: 150px;
border-radius:50%;
box-shadow: 5px 5px 4px 20px rgba(117, 112, 112, 0.2);
}
button{
outline:none;
border:none;
width:90%;
display: block;
height: 30px;
border-radius: 20px;
text-align: center;
margin: auto;
margin-top:40px;
background-color: rgba(85, 113, 129,0.8);
color: whitesmoke;
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
cursor: pointer;
}
button:hover{
background-color: rgb(85, 113, 129);
}
class App extends React.Component {
constructor(props){
super(props);
this.state= {
backgroundColor: "lightblue",
}
}
changeBackgroundColor = ()=>{
this.setState({ backgroundColor: getRandomColor() })
}
render(){
return(
<main>
<div
style={{backgroundColor:this.state.backgroundColor }}
className="circle"
/>
<button onClick={this.changeBackgroundColor}>Change Color</button>
</main>
)
}
}
const getRandomColor = ()=>{
return "#" + Math.random().toString(16).slice(2,8);
}
ReactDOM.render( <App /> ,
document.getElementById('root'));
External CSS
This Pen doesn't use any external CSS resources.