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

On a web page, you must have seen a stick menu positioned on the top. With that, a sticky element can also be placed on a web page. Also, using the position property, we can also make an image sticky that would stick even when the web page is scrolled. Let us see how to create a sticky image with HTML and CSS. Set the image Place an image on a web page using the element − Add some text to make the scroll appear Place some text after the image to let the scroll appear. ... Read More

To add a border to an image, use the border property and set it to the element. This is the shorthand property to set the border style, width, color, etc. The border style can be solid, double, dotted, etc. Add a Border to an Image The following is the code to add a border to an image using CSS. We have set the border in the img element − img { border: 8px solid rgb(0, 238, 255); width: 400px; height: 400px; } Example Let us see an example to add a border to an image − ... Read More