Nextjs Social Buttons
-Pro Component
Pure CSS Nextjs social buttons with plenty of examples. Also, easy to extend or add new brands.
Examples
import React from "react";
// reactstrap components
import { Button } from "reactstrap";
function Example() {
return (
<>
<Button className="btn-icon mt-2" color="facebook" type="button">
<span className="btn-inner--icon">
<i className="fab fa-facebook"></i>
</span>
<span className="btn-inner--text">Facebook</span>
</Button>
<Button className="btn-icon mt-2" color="twitter" type="button">
<span className="btn-inner--icon">
<i className="fab fa-twitter"></i>
</span>
<span className="btn-inner--text">Twitter</span>
</Button>
<Button
className="btn-icon mt-2"
color="google-plus"
type="button"
>
<span className="btn-inner--icon">
<i className="fab fa-google-plus-g"></i>
</span>
<span className="btn-inner--text">Google +</span>
</Button>
<Button className="btn-icon mt-2" color="instagram" type="button">
<span className="btn-inner--icon">
<i className="fab fa-instagram"></i>
</span>
<span className="btn-inner--text">Instagram</span>
</Button>
<Button className="btn-icon mt-2" color="pinterest" type="button">
<span className="btn-inner--icon">
<i className="fab fa-pinterest"></i>
</span>
<span className="btn-inner--text">Pinterest</span>
</Button>
<Button className="btn-icon mt-2" color="youtube" type="button">
<span className="btn-inner--icon">
<i className="fab fa-youtube"></i>
</span>
<span className="btn-inner--text">Youtube</span>
</Button>
<Button
className="btn-icon mt-2"
color="vimeo"
type="button"
>
<span className="btn-inner--icon">
<i className="fab fa-vimeo-v"></i>
</span>
<span className="btn-inner--text">Vimeo</span>
</Button>
<Button
className="btn-icon mt-2"
color="slack"
type="button"
>
<span className="btn-inner--icon">
<i className="fab fa-slack"></i>
</span>
<span className="btn-inner--text">Slack</span>
</Button>
<Button className="btn-icon mt-2" color="dribbble" type="button">
<span className="btn-inner--icon">
<i className="fab fa-dribbble"></i>
</span>
<span className="btn-inner--text">Dribbble</span>
</Button>
</>
);
}
export default Example;Icon only
import React from "react"; // reactstrap components
import { Button } from "reactstrap";
function Example() {
return (
<>
<Button className="btn-icon-only" color="facebook" type="button">
<span className="btn-inner--icon">
<i className="fab fa-facebook"></i>
</span>
</Button>
<Button className="btn-icon-only" color="twitter" type="button">
{" "}
<span className="btn-inner--icon">
<i className="fab fa-twitter"></i>
</span>
</Button>
<Button
className="btn-icon-only"
color="google-plus"
type="button"
>
{" "}
<span className="btn-inner--icon">
<i className="fab fa-google-plus-g"></i>
</span>
</Button>
<Button className="btn-icon-only" color="instagram" type="button">
{" "}
<span className="btn-inner--icon">
<i className="fab fa-instagram"></i>
</span>
</Button>
<Button className="btn-icon-only" color="pinterest" type="button">
{" "}
<span className="btn-inner--icon">
<i className="fab fa-pinterest"></i>
</span>
</Button>
<Button className="btn-icon-only" color="youtube" type="button">
{" "}
<span className="btn-inner--icon">
<i className="fab fa-youtube"></i>
</span>
</Button>
<Button className="btn-icon-only" color="vimeo" type="button">
{" "}
<span className="btn-inner--icon">
<i className="fab fa-vimeo-v"></i>
</span>
</Button>
<Button className="btn-icon-only" color="slack" type="button">
{" "}
<span className="btn-inner--icon">
<i className="fab fa-slack"></i>
</span>
</Button>
<Button className="btn-icon-only" color="dribbble" type="button">
{" "}
<span className="btn-inner--icon">
<i className="fab fa-dribbble"></i>
</span>
</Button>{" "}
</>
);
}
export default Example;Circle
Add the
.rounded-circle
modifier class to create a fully rounded button.
import React from "react";
// reactstrap components
import { Button } from "reactstrap";
function Example() {
return (
<>
<Button
className="btn-icon-only rounded-circle"
color="facebook"
type="button"
>
{" "}
<span className="btn-inner--icon">
<i className="fab fa-facebook"></i>
</span>
</Button>
<Button
className="btn-icon-only rounded-circle"
color="twitter"
type="button"
>
{" "}
<span className="btn-inner--icon">
<i className="fab fa-twitter"></i>
</span>
</Button>
<Button
className="btn-icon-only rounded-circle"
color="google-plus "
type="button"
>
{" "}
<span className="btn-inner--icon">
<i className="fab fa-google-plus-g"></i>
</span>
</Button>
<Button
className="btn-icon-only rounded-circle"
color="instagram"
type="button"
>
{" "}
<span className="btn-inner--icon">
<i className="fab fa-instagram"></i>
</span>
</Button>
<Button
className="btn-icon-only rounded-circle"
color="pinterest"
type="button"
>
{" "}
<span className="btn-inner--icon">
<i className="fab fa-pinterest"></i>
</span>
</Button>
<Button
className="btn-icon-only rounded-circle"
color="youtube"
type="button"
>
{" "}
<span className="btn-inner--icon">
<i className="fab fa-youtube"></i>
</span>
</Button>
<Button
className="btn-icon-only rounded-circle"
color="vimeo"
type="button"
>
{" "}
<span className="btn-inner--icon">
<i className="fab fa-vimeo-v"></i>
</span>
</Button>
<Button
className="btn-icon-only rounded-circle"
color="slack"
type="button"
>
{" "}
<span className="btn-inner--icon">
<i className="fab fa-slack"></i>
</span>
</Button>
<Button
className="btn-icon-only rounded-circle"
color="dribbble"
type="button"
>
{" "}
<span className="btn-inner--icon">
<i className="fab fa-dribbble"></i>
</span>
</Button>
</>
);
}
export default Example;Props
If you want to see more examples and properties please check the official Reactstrap Documentation.