Skip to main content

Simple Button Group Design | HTML And CSS

Simple-Button-Group-html-css

Simple Button Group Design Using HTML And CSS

"Button group" is required when we want to show users many options, the navigation bar is one of the simplest example. This button group animation design using HTML and CSS. This animation is completely responsive.

In this design, we have five button groups with different names. All the buttons are close to each other and when you reduce the size of the browser window the button becomes vertical like a group stack.

We have button animations which are generally used in website development. You can read more articles on button animation.



01. HTML STRUCTURE

<!DOCTYPE html>
<html>
<head>
  <title>Simple Button Group Design</title>  
  <link rel="stylesheet" href="style.css">
</head>

<body>

    main content.

</body>
</html>


02. HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Button Group Design</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <div class="container">
      <button>HTML</button>
      <button>CSS</button>
      <button>JAVASCRIPT</button>
      <button>MySQL</button>
      <button>PHP</button>
    </div>
  </body>
</html>



03. CSS

*{
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}
body{
  padding: 50px;
}

.container{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.container button{
  cursor: pointer;
  border: 1px solid grey;
  padding: 16px;
  font-size: 12px;
  color: grey;
  text-align: center;
  float: left;
  background: transparent;
  width: 100px;
  transition: all .5s;
}
.container button:hover{
  background: #0000ff;
  color: #fff;
  border: 1px solid blue;
  opacity: .7;
}




04. Youtube Video

Here I am attaching a YouTube video from my channel so that you can understand this article better and you can create a better web user interface. I have a lot of videos on my YouTube channel which is related to the user interface and web development. You can also, learn about web development from there.




05. SOURCE CODE

After reading this article and watching a YouTube video, if you want to download source code, you can download from here and change this according to your need.





RELATED POST:

Comments

Post a Comment