Description
Hello everyone! In this video, you are going to learn how to create a hover button with a glowing shadow effect. it is very simple to design and I think it will helpful for you when you design attractive buttons. This shadow effect will work when you hover the cursor on the button. Let's see how to create this hover button with a glowing shadow effect.
First, you need to create an index.html file and style.css file. Then start coding the index.html file. For the button create an anchor tag with the class name "btn". Then link the style.css file to the index.html file between the <head></head> tags like in the video. Then start coding the style.css file. Write the styles for the body to center the element. Then write styles for the button using class "btn". font-family, font-size, font-weight, background, width, padding, text-align, text-decoration, text-transform, color, border-radius, cursor, box-shadow using these properties. Then the button hover styles. On the button hover to change the box-shadow and transform the button scale. And include the transition duration in the "btn" selector to transition the hover to time-duration and add transition properties box-shadow, transform. So that's it hope this video will be helpful for you to get an idea about design attractive button effects.
All the source codes and source files and available to download from here. Use the download button or copy and paste the code from the text editors. My opinion is first try to do it by following the video line by line. It will help you to understand all of it. After that, if your code is wrong or not working use the given source codes to compare with your code. It will help you to understand all of your mistakes.
We only allow you to publish relevant and respectful comments. Vulgar, hateful, or spam comments will be removed.
Post a Comment