This is a quick tutorial where we have developed a simple CSS button with the most modern looks as it will have a gradient color background and will have a shadow which will make it look floating on top of the screen.
The era of using pictures as a background is long gone and these days more and more websites are moving towards white backgrounds with vibrant colors used as highlighters. And when it comes to colors, what better than a mix of a few colors.
Gradient colors are also used in hover effects for sidebars as we have used on our website(check the left sidebar of CSS tutorial) and it is gaining popularity with buttons too.
We will start with the basic HTML code for creating a button. We will also add a class attribute to it with value cool-button.
<button class="cool-button">Cool Button</button>
Then we will add the CSS code. Below we have specified the CSS code with explanation for the code.
color: white;
padding: 10px 30px;
border-radius: 5px;
background: #f857a6;
background: -webkit-linear-gradient(to right, #ff5858, #f857a6);
background: linear-gradient(to right, #ff5858, #f857a6);
box-shadow: 0 10px 10px -2px rgba(0,0,0,.25);
First property color:white is to make the text color white.
Second property padding specifies 10px padding for top and bottom and 30px padding for left and right side in the button.
Third property background:#f857a6 is for the old browser which does not support gradient property of CSS. This is a fallback property so that our button doesn't have any background color on the old browsers.
In the next two lines we have specified the background gradient color with two colors and the gradient color change going from left to right which means the first color will start from left and moving towards the right side the color will change into the second color.
You can pick any two color for this and you can also specify the direction like 'to bottom', 'to top', 'to left' etc to change the direction of the gradient flow.
The last property is for specifying shadow for the button.
Hope this modern button helps you in your web development journey for creating a beautiful user interface for your web application.
You may also like:
