How To Create A Gradation Effect On A Button?

How To Create A Gradation Effect On A Button?
In This tutorial will discuss an example of an effect created by CSS3, namely how to create a gradient effect on a button . Gradation is a very interesting color combination so that the gradient effect is one of the most widely used effects in website page designs today, one example that I will share with you is the use of the color gradient effect on the button element.

For those of you who are curious about how to make it, there is nothing wrong with listening and at the same time following the steps below.

To create a gradient effect this time, of course, the element we will use is the button element, please create and type it like the following syntax.
<body>
    <button class = "btn btn-flex"> </button>
</body>
After creating the button element as above, next is to design and adjust the button element and of course create a color gradient effect on the button, please type in the CSS3 syntax as follows.
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: # 000000;
    background-image: linear-gradient (147deg, # 000000 0%, # 232323 74%);
}
.btn-flex {
    display: flex;
    align-items: center;
    justify-content: center;
}
.btn {
    user-select: none;
}
button {
    width: 150px;
    height: 50px;
    cursor: pointer;
    border: none;
    border-radius: 25px;
    background-color: # 50d8d7;
    background-image: linear-gradient (316deg, # 3cb5b5 0%, # e53b51 74%);
    transition: 500ms;
}
button :: after {
    width: 143px;
    height: 43px;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    content: 'SUBMIT';
    font-size: 20px;
    color: #eee;
    border-radius: 25px;
    background-color: # 222;
    transition: 500ms;
}
button: hover :: after {
    font-size: 25px;
    background-color: transparent;
}
button: focus {
    outline: none;
}

After you have typed all the HTML and CSS syntax, please save the file then you can open it in each browser and see the results.

By adding a color gradient effect to the button element as above, it will make the style of the element look more attractive and nice. All right, that's all the eventtechy tutorial this time, hopefully the tutorial How to Make a Gradation Effect on the Button is useful, good luck and see you in the next eventtechy tutorial. Also check out other interesting articles only on eventtechy.

Comments

Post a Comment

Popular posts from this blog

How To Change Website Background Color With CSS?

Image
This has become the basis for creating a website. Because HTML and CSS will be the basic framework of the website and can be used to design websites. You must have tried downloading a template because you want to know what the coding looks like, right? In fact, you will try to change the template . Starting from changing images, menus, writing, background , and others. But, because you are still confused, you will definitely find it difficult to change it. In this tutorial, Event techy will give a few tips for changing the background color of a website with CSS. Event techy will provide step by step starting from finding the CSS file first. You can follow the methods below! How do I find the CSS file? 1. If you download a template, you can search for a folder which is usually named "css "or" assets". 2. Look for a file called style.css/ styles.css/ main.css (can have another name which is usually different from all existing css files and has a style written ). 3. If
Read more

How to Make Responsive CSS Minifier Pages?

Image
This CSS Minifier functions to compress / shrink the css code that will be applied to the blog. So that the speed of the blog can feel even faster with the reduction in the size of the css. With a small css it will certainly improve your blog SEO. Have you ever used a tool to view or check the speed of your blog, then get a message to "Compress CSS"so that your blog speed increases. Then you type in a search engine with the keyword "How to Minify CSS" or even "How to compress CSS". Surely you will get a link that contains this CSS Minifier, even out there there are those that are not only for CSS, but Javascript and HTML Minifier. Don't you want to create a CSS Minifier on your own blog? to make it easier for you without having to use other people's tools. How to Create a CSS Minifier Tool Page on Blogspot? If you want to make this tool on your own blog, please watch and follow the tutorial until it's finished. First, please log in to your Blog
Read more