[Solved]-react-facebook-login button style-Reactjs

It seems working for me. Just did a work around on your code. Tell the exact error. It would be helpful. Here I attached the output.

Here is a simplified example using styled-components

It's using your css and resizing the way it should.

You can copy/paste this Component and import it into your app maybe it helps figuring out your problem.

import React, { Component } from 'react'
import styled from 'styled-components';

const Wrapper = styled.div`
    @media only screen and (max-width : 399px) {
        width: 10%
    }
`

const BtnFacebook = styled.button`
    width: 165px;
    height:35px;  
    border-radius: 4px;
    background: #3b5998;
    color:white;
    border:0px transparent;  
    text-align: center;
    margin:5px;
    display: inline-block;

    &:hover{
        background: #3b5998;
        opacity: 0.6;
    }
`;
const BtnGoogle = styled.button`
    margin:5px;
    width: 165px;
    height:35px;
    border-radius: 4px;
    background: #db3236;
    color:white;
    border:0px transparent;
    text-align: center;

    &:hover{
        background: #3b5998;
        opacity: 0.6;
    }
`
class Login extends Component {
    render() {
        return (
            <div style={{ display: 'flex', flexWrap: 'wrap' }} >
                <Wrapper>
                    <BtnFacebook >
                        &nbsp;&nbsp;Sign In with Facebook
                        </BtnFacebook >
                    <BtnGoogle>
                        &nbsp;&nbsp;Sign In with Google
                        </BtnGoogle >
                </Wrapper>
            </div>
        )
    }
}

export default Login