.main {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}

.up {
  display: flex;
  flex-direction: row;
  gap: 0.5em;
}

.down {
  display: flex;
  flex-direction: row;
  gap: 0.5em;
}

.card1 {
  width: 90px;
  height: 90px;
  outline: none;
  border: none;
  background: white;
  border-radius: 90px 5px 5px 5px;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
  transition: .2s ease-in-out;
}

.instagram {
  margin-top: 1.5em;
  margin-left: 1.2em;
  fill: #cc39a4;
}

.card2 {
  width: 90px;
  height: 90px;
  outline: none;
  border: none;
  background: white;
  border-radius: 5px 90px 5px 5px;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
  transition: .2s ease-in-out;
}

.twitter {
  margin-top: 1.5em;
  margin-left: -.9em;
  fill: #03A9F4;
}

.card3 {
  width: 90px;
  height: 90px;
  outline: none;
  border: none;
  background: white;
  border-radius: 5px 5px 5px 90px;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
  transition: .2s ease-in-out;
}

.github {
  margin-top: -.6em;
  margin-left: 1.2em;
}

.card4 {
  width: 90px;
  height: 90px;
  outline: none;
  border: none;
  background: white;
  border-radius: 5px 5px 90px 5px;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
  transition: .2s ease-in-out;
}

.discord {
  margin-top: -.9em;
  margin-left: -1.2em;
  fill: #8c9eff;
}

.card1:hover {
  cursor: pointer;
  scale: 1.1;
  background-color: #cc39a4;
}

.card1:hover .instagram {
  fill: white;
}

.card2:hover {
  cursor: pointer;
  scale: 1.1;
  background-color: #03A9F4;
}

.card2:hover .twitter {
  fill: white;
}

.card3:hover {
  cursor: pointer;
  scale: 1.1;
  background-color: black;
}

.card3:hover .github {
  fill: white;
}

.card4:hover {
  cursor: pointer;
  scale: 1.1;
  background-color: #8c9eff;
}

.card4:hover .discord {
  fill: white;
}

Live Preview

Ready Ln 1, Col 1

UTF-8 HTML/JS

Social Media Icon Buttons with Stylish Corners Using HTML & CSS

In this post, you’ll learn how to create interactive social media icon buttons with unique corner radius effects using pure HTML and CSS. These buttons are visually engaging and provide a polished look for any modern UI.

The design is perfect for showcasing popular platforms like Instagram, Twitter, GitHub, and Discord — each with its own color branding and hover animations.

What This UI Design Offers

This layout features four circular-cornered buttons arranged in a square grid layout — two on the top row and two on the bottom. Each button displays an SVG icon for a specific platform:

Instagram: Top-left corner rounded
Twitter: Top-right corner rounded
GitHub: Bottom-left corner rounded
Discord: Bottom-right corner rounded

Key Interactions:

On hover, each button slightly enlarges using a scale transform.
The button background color shifts to the platform’s signature color.
The icon’s fill color inverts to white for visual clarity.

How It Works

1. HTML Structure

The layout is divided into two rows using .up and .down classes inside a .main container. Each row holds two <button> elements with platform-specific classes and embedded SVG icons.

2. CSS Button Styling

Buttons are 90×90 pixels, with rounded corners controlled individually using border-radius.
Box shadows add subtle elevation.
Each button is styled with its own class (card1, card2, etc.) to apply different rounding and hover effects.
On hover, the buttons change background color, scale up (scale: 1.1), and invert the icon fill to white.

3. Icon Placement

SVG icons are positioned using margin-top and margin-left tweaks to center them visually in each button.

Why Use This Button Design? No JavaScript Required
This design is fully responsive and interactive using only HTML and CSS.

Brand Recognition
Each button uses the exact color associated with the platform — making them instantly recognizable.

Creative Layout
Using different corner radii on each button gives a playful yet professional look.

Hover Animation
Smooth transitions enhance user experience and add polish to your interface.

Use Cases

This layout is perfect for:

Portfolio websites
Footer social media sections
Landing pages
Contact or follow-me cards
Mobile app UI components

You can even customize this setup for other platforms like LinkedIn, YouTube, or Facebook by simply changing the SVG icon and colors.

Final Thoughts

This creative corner-based button layout is a small but powerful design that adds uniqueness to your web interface. It’s clean, easy to implement, and fully customizable for any social media platform or brand.

This code uses HTML and CSS only — no JavaScript included.

MIT License

Permission is freely granted to anyone who obtains a copy of this software and its accompanying documentation files (referred to as “the Software”), allowing them to use, copy, modify, merge, publish, distribute, sublicense, and even sell copies of the Software. Additionally, users are allowed to permit others to use the Software under these same terms.

It is required that the above copyright notices and this permission notice be included in all versions or significant portions of the Software.

Please note, the Software is provided “as is”, without any form of warranty—express or implied. This includes, but is not limited to, warranties of merchantability, fitness for a specific purpose, or non-infringement. Under no circumstances shall the original authors or rights holders be held responsible for any claims, damages, or other liabilities that may arise from the use of the Software, whether through legal action, negligence, or otherwise.

All code on Freeofcosts.com is reviewed before publishing. Each post includes a live code editor with real-time preview, so you can experiment and learn by doing. Most code is open-source and free to use or modify under respective licenses.