The pill buttons mean pill-shaped buttons. We can easily style and shape the default button to form a pill button. Set the border-radius on the button to shape it like a pill button. You can also remove the border using the border property with the value none. Align the button text in the center using the text-align property with the value center. Create buttons First, create buttons using the element − Button 1 Button 2 Button 3 Button 4 Reshape the button to pill button The button we created above will be converted to a pill ... Read More

The download icon on the download buttons plays a key role in styling the buttons. This allows a user navigating the website in understanding that this is a download button and on clicking the file will download. The icons can be included on a web page with Font Awesome. For that, to begin with you need to set the CDN link in the element. Let us see how to style download buttons. Set the CDN for the icon To add the icons on our web page, we have used the Font Awesome Icons. Include it on a web page ... Read More

Buttons can be displayed as loading when they are clicked. On click, the button may reach the next page but just before that, the loading stage is visible. On your web page, you can easily display the loading buttons with HTML and CSS. First, load the icons. Set the CDN for the icons To add the icons on our web page, we have used the Font Awesome Icons. Include it on a web page using the element − Create the buttons The buttons are created using the element. The three different loading icons are set ... Read More

On a web page, you must have seen the social media buttons for Facebook, Twitter, Gmail, etc. We can easily design such buttons using CSS. For that, you need to also set the social media icons. Icons are placed on the button using the element. Let us see how to style the social media buttons with CSS. Set the CDN for the social media icons To add the icons on the buttons on a web page, we have used the Font Awesome Icons. Include it on a web page using the element − Set the ... Read More

To crate fading buttons on a web page, use the opacity property. To enable this feature on hovering the mouse cursor, use the :hover selector. To fade in on hover, set the opacity to 1 on hover when the actual button is set to opacity less than 1. This works the opposite for fade out on hover. Fade out on hover Set the opacity to less than 1 to implement the fade out concept. To implement it on hover, use the :hover selector − button:hover { opacity: 0.5; } Example The following is the code ... Read More

To animate buttons on a web page, use the transition property. Set the transition duration as well. Using the :after selector on a button, set how the look of the button animates after it is clicked. Create a Button Let us first create a button using the element − Click Here Style the Button The button is styled here. The position is set to relative, the cursor is set to pointer. With that, the width is also set − button { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; position: relative; background-color: rgb(100, 0, 84); border: none; ... Read More

Under the menu section of a web page, you must have seen dropdowns. On keeping the mouse cursor on a dropdown menu button, the sub menus are visible. Such split buttons appear to be in a different section within the same button. This can be represented by arrow keys or a bottom arrow. Let us see how to create such menus with HTML and CSS. Create a dropdown menu button Use the element to create a button for the dropdown menu − Button Style the button like this − button { background-color: rgb(18, ... Read More

The buttons on a web page can be styled and made attractive using CSS styles and a outline can be set. The text and background color can be easily changed. Also, the default size can be changed. With that, the shape can be given rounded corners using the border-radius property. Let us see how to style outline buttons with HTML and CSS. Buttons The element is used to set different buttons for information, success, warning and danger. These are the different button styles we will set with CSS − Success Info Warning Danger Default Style the ... Read More

Following is the code to create an image zoom:Example Live Demo    * {box-sizing: border-box;}    .img{       display: inline-block;    }    .img-zoom-container {       position: relative;    }    .img-zoom-zoomLens {       position: absolute;       border: 1px solid #d4d4d4;       width: 50px;       height: 50px;    }    .myresult{       display: inline-block;    }    .img-zoom-result {       border: 1px solid #d4d4d4;    } Image Zoom Example Hover over the image on ... Read More

If you are a shutterbug and loves photography, you would love to display it on a website for sure. For that, grids are created for the gallery that also works on different devices. The responsiveness can also be set easily. Let us see how to create a responsive portfolio gallery grid. Set the main content Under the content, set the parent div. Within that, place the divs for image and then the content. Here, we have only shown a single div for our portfolio gallery − ... Read More