Grainy Buttons Design Using Css

Here’s a guide to help you create a visually appealing Grainy Buttons Design Using CSS. This tutorial will walk you through the process of creating these unique and stylish buttons step-by-step.

Step 1: Include Header Assets

First, you’ll need to include necessary stylesheets in the section of your HTML document. This will provide the foundational styles and fonts for the buttons.

<link rel="stylesheet" href="https://public.codepenassets.com/css/reset-2.0.min.css">
<link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Nunito:wght@500&amp;display=swap'>

Step 2: Create the HTML Structure

Next, build the basic HTML structure for the buttons. This involves creating a list of items, each containing a button with a span for the text.

<ul class="list">
	<li class="list__item">
		<a href="#" class="button">
			<span>
				Sweet potato dressing
			</span>
		</a>
	</li>
	<li class="list__item">
		<a href="#" class="button">
			<span>
				Seasonal green onions
			</span>
		</a>
	</li>
	<li class="list__item">
		<a href="#" class="button">
			<span>
				Cinnamon coconut rice
			</span>
		</a>
	</li>
</ul>

Step 3: Add CSS Styling

Now, add the CSS styles to create the grainy effect and customize the appearance of the buttons. This includes setting up the layout, colors, and the grainy background effect using gradients and filters.

html, body {
  height: 100%;
}

*, *::after {
  box-sizing: border-box;
}

body {
  font: 500 100%/1 "Nunito", sans-serif;
  background-color: #272420;
}

.list__item {
  color: #272420;
  height: auto;
  min-height: 33vh;
  padding: 40px 60px;
  display: grid;
  place-items: center;
  position: relative;
  background-color: #F3EDED;
}
.list__item:hover {
  background-position: 0% 100%;
}
.list__item:nth-child(2) {
  background-color: #F0D7C2;
}
.list__item:nth-child(3) {
  background-color: #C5B5CA;
}

.button {
  background-color: inherit;
  font-size: 1.2rem;
  line-height: 1;
  color: currentColor;
  text-decoration: none;
  display: block;
  position: relative;
  text-align: center;
}
.button span {
  background-color: #97BEE6;
  display: inherit;
  padding: 1em 3em;
  border: 2px solid currentColor;
  border-radius: 2em;
  position: relative;
  z-index: 1;
  transform: translate(-0.4rem, -0.4rem);
  transition: 0.2s ease-in-out;
}
.button::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 2em;
  position: absolute;
  top: 0;
  left: 0;
  border: 2px solid currentColor;
  background-color: inherit;
  pointer-events: none;
  mix-blend-mode: darken;
  filter: contrast(1200%) brightness(100%) saturate(0.25);
  overflow: hidden;
  background: linear-gradient(182deg, currentColor, currentColor 25%, rgba(0, 0, 0, 0) 100%), url("data:image/svg+xml,%3Csvg viewBox='0 0 400 75' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}
.button:hover span {
  transform: translate(0px, 0px);
  transition: 0.2s ease-in-out;
}

Step 4: Final Result

After completing the above steps, you will have successfully created Grainy Buttons Design Using CSS. You can further customize the appearance by adjusting the CSS properties.

In conclusion, this tutorial provided a step-by-step guide on how to create visually appealing grainy buttons using CSS. These buttons add a unique textured effect to your website, enhancing its overall design.