Website Programming: Make a Hue-Gradient Hover Button Using HTML and CSS in Responsive Way
Bandung, Indonesia, October 17, 2020, 13:46PM - Simply put, a button is a button in any graphic or box that allows people to interact with your website. The interaction is generally an action that developers want visitors to take. When you look at all the different types of design, you will notice that buttons simply call to action, but the design itself that made the button looks special. For example, you would add an archive so you need to click/touch "Add Archive" the button at the website so visitors can Add Archive.
There are many types of buttons I mean in the design world, it depends on you which style do you like to put into your button, me personally like glowing buttons to put it simply because I like RGB and reflection of the glowing, as you can see that the gif or picture I put show reflection of the button's glowing "include the text". The animation which we are going to do is Hovering, this is one of the most practical CSS buttons in which you can trigger the button(i mean the animation) on any website through the point the button with your cursor.
Back in the days, you would need to create the button without animation(i mean when you're still new to the website. All you know that button's appearance just a box with words inside). In this lesson, we will learn that CSS can give a big impact on this button throughout RGB colors and reflection. The modern web design with HTML5 and CSS3 gave given us innumerable possibilities to create anything. Your creative design is on you, just do what you like.
HTML
Head is the first section of HTML, in this part we can put many function inside like
<meta charset = "UTF-8">(UTF means unicode-based encoding, this code can support many languages and accommodate pages and forms in any mixture of languages)
<meta name="viewport" (viewport means the user's visible area of a website. The viewport varies with any device with different screen size) content = "width=device-width, initial-scale=1.0">(for the responsive website)
<link rel = "stylesheet" href = "style.css"> Css is one of the important element in website design, sometimes developer put the CSS as an external file, through href we can link the external file by a link.
For the body, we only need <a href="#"><span>P-Blog</span></a> to show a button in the website, and make sure to change the # of the code, in the picture I put <a href = "#" to link to #. # can be said "Don't Care", basically href is an attribute specifies the URL of the page. we can say that this is a kind of hyperlink that connects one like to the other file.
CSS ( style.css ) external
In the first section of CSS, we have to adjust the basics settings by using *(The * in CSS means all elements, it's a universal selector. So we are setting all elements to have the same settings, thus making them look the same in the browser), body, and the main object/button represented by a (because we used <a href..> so a means the first word of the codes). Also, I used -webkit-box-reflect to make a reflection of the gradient-colors and the text. So when the button triggered, the button's effect will be reflected on the ground like reflect on the glass.
Next, we have to adjust the before and after settings. using background: linear-gradient(45deg, colors.....) means I'm going to make a gradient color with 45 degrees using 5x5 colors. In terms to make the colors moving, I used "animation: animate 20s linear infinite;" it means I'm going to do animation for 20 seconds frames and repeat them in a loop.
@keyframes is the code that I used to make the animation, a keyframe is similar to JavaScript, they have functions to the display. Keyframing is the simplest form of animating an object. In this function, I put orders to use the background as the place for gradient color's moving.
At last I only have to adjust the button settings, include the hover. So with hover, we can trigger the button to do animation.
Comments
Post a Comment