DEV Community

Cover image for πŸ’… Button ~in 4 framework
Jorjis Hasan
Jorjis Hasan

Posted on • Updated on

πŸ’… Button ~in 4 framework

Title: A simple Button is translating in almost all CSS frameworks.

Well, it's more likely saying I love you 🐢 to your love in Mandarin, Spanish, French or any different language. But it holds the same meanings. Now it gets funny. Let's jump.

Likewise, now I will style a button in the top 4 popular frameworks:

  • Tailwind
  • Bootstrap
  • MaterialUI
  • Styled-Component

Once you go with me, you'll get excellent hands-on on all the frameworks.


Pseudo Code:

color β†’ #1f1f1f,
border β†’ 1px solid #1f1f1f,
padding β†’ top & bottom = 20px + right & left = 48px

While hovering πŸ‘‡

color β†’ #fff
background β†’ #9747ff
transition β†’ 300ms
Enter fullscreen mode Exit fullscreen mode

Visualization of Explanation


In Tailwind

//App.js
const InTailwind = () => {
  return (
    <button className="text-[#1f1f1f] px-[48px] py-[20px] text-[32px] cursor-pointer border rounded-[7px] transition-colors duration-300 hover:bg-[#9747ff] hover:text-[#fff]">
      Button
    </button>
  );
};

Enter fullscreen mode Exit fullscreen mode

Configure your tailwind project considering your bundler. Mine was parcel. And if you're using VS-Code as a code editor, then make sure to install an extension called Tailwind CSS IntelliSense.


In Bootstrap

/* custom.css */
.btn-custom {
  font-family: inherit;
  background-color: #fff;
  border: 1px solid #1f1f1f;
  border-radius: 7px;
  font-size: 32px;
  cursor: pointer;
  transition-duration: 0.3s;
  padding: 20px 48px;
}

.btn-custom:hover {
  background-color: #9747ff;
  color: #fff;
  border-color: #9747ff;
}
Enter fullscreen mode Exit fullscreen mode
//App.js

import "bootstrap/dist/css/bootstrap.min.css";

const InBootstrap = () => {
  return <button className="btn btn-custom">Button</button>;
};

Enter fullscreen mode Exit fullscreen mode

Bootstrap doesn't have built-in utility classes for our work done as required. To achieve the same properties(color, margin, padding, hover) as the description says, we used custom CSS.


In MaterialUI

//App.js
import { Button } from "@mui/material";

const InMaterialUi = () => {
  return (
    <Button
      sx={{
        fontFamily: "inherit",
        backgroundColor: "#fff",
        color: "#1f1f1f",
        border: "1px solid #1f1f1f",
        borderRadius: "7px",
        fontSize: "32px",
        cursor: "pointer",
        transitionDuration: "0.3s",
        padding: "20px 48px",
        "&:hover": {
          backgroundColor: "#9747ff",
          color: "#fff",
          borderColor: "#9747ff",
        },
      }}
    >
      Button
    </Button>
  );
};

Enter fullscreen mode Exit fullscreen mode

installation. We have a few options(sx, theme, styled function) to customize CSS. Here, we used sx={} props which is available on every materialUI component. It's kinda like the normal style prop on HTML, but under the hood it gets converted into normal CSS classes and comes with some additional features.
Spotify, Netflix, Amazon, and Unity are all faang companies that use MaterialUI as their primary styling framework.


In Styled-Component

//App.js
import styled from "styled-components";

const StyledButton = styled.button`
  font-family: inherit;
  background-color: #fff;
  border: 1px solid #1f1f1f;
  border-radius: 7px;
  font-size: 32px;
  cursor: pointer;
  transition-duration: 0.3s;
  padding: 20px 48px;
  &:hover {
    background-color: #9747ff;
    color: #fff;
    border-color: #9747ff;
  }
`;

const InStyledComponent = () => {
  return <StyledButton>Button</StyledButton>;
};

Enter fullscreen mode Exit fullscreen mode

installation. This framework is built for performance and simplicity. Most mid-tier companies like godaddy use styled-components for styling.


Every framework has its way of doing things. Each is used for especial purposes. I use Tailwind on a regular basis. It helps me style the entire app without leaving the jsx file.

Source Code β†’

Top comments (0)