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;