آموزش ساخت دکمه روي عکس (Button on Image) در وبسايت

در این مقاله می آموزیم که چطور با استفاده از کد CSS , Html ، دکمه روي عکسي (split button) ایجاد کنیم.

Split Button Dropdowns

قدم اول : کد HTML را اضافه کنید.

                 

                     
                     Button
                        
                 

قدم دوم :   کد CSS را اضافه کنید.

                                    /* Container needed to position the button. Adjust the width as needed */
                .container {
                  position: relative;
                  width: 50%;
                }

                /* Make the image responsive */
                .container img {
                  width: 100%;
                  height: auto;
                }

                /* Style the button and place it in the middle of the container/image */
                .container .btn {
                  position: absolute;
                  top: 50%;
                  left: 50%;
                  transform: translate(-50%, -50%);
                  -ms-transform: translate(-50%, -50%);
                  background-color: #555;
                  color: white;
                  font-size: 16px;
                  padding: 12px 24px;
                  border: none;
                  cursor: pointer;
                  border-radius: 5px;
                }

                .container .btn:hover {
                  background-color: black;
                }



                

<h2>دکمه روي عکس</h2>

<p>:اضافه شدن دکمه روي عکس</p>