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
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>
);
};
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;
}
//App.js
import "bootstrap/dist/css/bootstrap.min.css";
const InBootstrap = () => {
return <button className="btn btn-custom">Button</button>;
};
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>
);
};
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>;
};
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.
Top comments (0)