Home › Wallpaper › Beautiful effects for buttons using css. Rounded corners. Describe the CSS styles of the button

Beautiful effects for buttons using css. Rounded corners. Describe the CSS styles of the button

Everyone has long been tired of traditional rectangular corners in website design. Rounded corners are in fashion, which are made not using images, but through styles, for which the border-radius property is used. This property can have one, two, three or four values separated by a space, which determine the radius of all corners or each individually.

In table 1 shows a different number of values and the type of block that is obtained in this case.

Code	Description	View
div ( border-radius: 10px; )	Rounding radius for all corners at once.
div ( border-radius: 0 10px; )	The first value sets the radius of the top left and bottom right corners, the second value sets the radius for the top right and bottom left.
div ( border-radius: 20px 10px 0; )	The first value sets the radius of the upper left corner, the second - both the upper right and lower left, and the third value - the lower right.
div ( border-radius: 20px 10px 5px 0; )	Sequentially sets the radius of the upper left, upper right, lower right and lower left corners.

Example 1 shows how to create a block with rounded corners.

Example 1. Corners of a block

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Radius

Me is the suppletive form of the accusative case of I.

Result this example shown in Fig. 1.

Rice. 1. Block with rounded corners

An interesting effect can be obtained if you set the rounding radius to be greater than half the height and width of the element. In this case, you will get a circle. Example 2 shows how to create a round button with a picture.

Example 2: Round button

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Button

The result of this example is shown in Fig. 2.

Rice. 2. Round button

IN Opera browser rounding to

CSS styles for all buttons

Different browsers display some standard CSS rules slightly differently. Therefore, in the following CSS code we will reset all styles, and add some default values. This is what the code looks like:

Button ( display: inline-block; margin: 0 10px 0 0; padding: 15px 45px; font-size: 48px; font-family: "Bitter",serif; line-height: 1.8; appearance: none; box-shadow: none; border-radius: 0; ) button:focus ( outline: none )

It's not difficult at all. Well, now let's take a closer look at each of the 4 styles of our stylish buttons.

Flat buttons filled with background

This type of button is very popular nowadays, as it meets all modern web design trends. In other words, this is a flat style or Flat design. Moreover, people are accustomed to such buttons and willingly click on them.

This image shows the button's three states, normal (default), on hover, and on click or action:

The CSS code for these buttons is very simple. This seems to me to be a huge plus:

Section.flat button ( color: #fff; background-color: #6496c8; text-shadow: -1px 1px #417cb8; border: none; ) section.flat button:hover, section.flat button.hover ( background-color: #346392; text-shadow: -1px 1px #27496d; ) section.flat button:active, section.flat button.active ( background-color: #27496d; text-shadow: -1px 1px #193047; )

Style buttons with borders or borders

This style of buttons is in the same class as flat buttons. The only difference is that here we remove the fill, and instead set rules for displaying the border of the buttons. This image shows everything clearly:

And as usual the CSS code is very simple, we just add rules for the border to appear:

Section.border button ( color: #6496c8; background: rgba(0,0,0,0); border: solid 5px #6496c8; ) section.border button:hover, section.border button.hover ( border-color: # 346392; color: #346392; ) section.border button:active, section.border button.active ( border-color: #27496d; color: #27496d; )

Buttons with shadow and gradient in CSS

This style of buttons can easily be called outdated, but even now it can be found on the Internet. If these buttons fit the style of your site, then they are just for you. They are also very easy to make, here is an image:

In CSS we will use shadow and gradient fill rules. When hovering, a shadow will appear around the button and when clicked inside.

Section.gradient button ( color: #fff; text-shadow: -2px 2px #346392; background-color: #ff9664; background-image: linear-gradient(top, #6496c8, #346392); box-shadow: inset 0 0 0 1px #27496d; border: none; border-radius: 15px; ) section.gradient button:hover, section.gradient button.hover ( box-shadow: inset 0 0 0 1px #27496d,0 5px 15px #193047; ) section.gradient button:active, section.gradient button.active ( box-shadow: inset 0 0 0 1px #27496d,inset 0 5px 30px #193047; )

Stylish click effect

This style is also very popular now and is widely used in website design. It seems to the user that the button is actually being pressed. Here you can see the details in the image:

The CSS here is a little more complex and requires a bit of math. But this can be easily understood. In general, it's not all that scary. We will place a non-blurred shadow under the button so that it gives the effect of a 3D button or appears to stick out a little. When we hover over the buttons we will make the background darker. And when the user clicks on the button, we will change the position of the button itself in the styles. And to make it all look more impressive and smooth, we will add a CSS3 transformation (translateY). This way the button will smoothly move down. And here is the CSS code itself:

Section.press button ( color: #fff; background-color: #6496c8; border: none; border-radius: 15px; box-shadow: 0 10px #27496d; ) section.press button:hover, section.press button.hover ( background-color: #417cb8 ) section.press button:active, section.press button.active ( background-color: #417cb8; box-shadow: 0 5px #27496d; transform: translateY(5px); )

Demo Ι

Conclusion

That's it! Now you have stylish and modern buttons that you can use for your needs. Naturally, you can change them until they are unrecognizable, this is only the simplest example of the implementation of this kind of buttons. I hope you enjoyed this lesson. See you soon!

Hello dear readers. We have already studied many of the properties that appeared in CSS3, but just knowing them is not enough. You definitely need to practice! And today I will show you...

Let's open the file index.html and create a simple structure

CSS3 Buttons

Nothing special. Just 3 block with class .button Let's move on to styles now.

Body (

}

Button (
display: inline-block;
margin: 40px;
width: 100px;
height: 100px;
background: url(http://subtlepatterns.com/patterns/extra_clean_paper.png);
cursor: pointer;
border-radius: 50%;

inset 0 2px 0 rgba(255,255,255,.6),
0 2px 0 rgba(0,0,0,.1),
inset 0 0 20px rgba(0,0,0,.1);
}

I took the background for the document and our buttons from the site subtlepatterns.com.

We do ours div line-block, so that they line up horizontally, we set their height, width, indent from the edges of the browser, rounding 50% to get a circle, and when hovering the cursor we do pointer. There is nothing complicated here, but it was not for nothing that I separated the shadow in the styles, because This is exactly the part that can cause difficulties, although everything is simple there too, and you will see this now.

Having set the first shadow, we will already see the outline of our circle:

Box-shadow: 0 3px 20px rgba(0,0,0,.25);

Then we ask inner shadow, so that we have such a window on top, and the button becomes more voluminous.

Box-shadow: 0 3px 20px rgba(0,0,0,.25),
inset 0 2px 0 rgba(255,255,255,.6);

The next outer shadow is needed to slightly darken the area under the button below, and the next inner one darkens the space inside the button for greater effect)

Box-shadow: 0 3px 20px rgba(0,0,0,.25),
inset 0 2px 0 rgba(255,255,255,.6),
0 2px 0 rgba(0,0,0,.1),
inset 0 0 20px rgba(0,0,0,.1);

As you can see, at first it seems complicated, there are many properties, but if you look into it, everything turns out to be much simpler. So here is our final result:

Now let's implement the behavior on hover per block

Button:hover (
box-shadow: inset 0 0 20px rgba(0,0,0,.2),
0 2px 0 rgba(255,255,255,.4),
inset 0 2px 0 rgba(0,0,0,.1);
}

We have already dealt with shadows in the block, now try to figure out for yourself what happens when you hover. Likewise, leave just one shadow and see what happens, and then add a second one and see what changes, and so on.

Finally, let's add icons to our buttons so it doesn't get too boring. To do this, let's change a little html

Btn-photo (
background: url(http://defaulticon.com/sites/default/files/styles/icon-front-page-32x32-preview/public/field/image/MD-camera-photo_0.png) center center no-repeat;
}

Btn-settings (
background: url(http://defaulticon.com/sites/default/files/styles/icon-front-page-32x32-preview/public/field/image/settings.png) center center no-repeat;
}

Btn-tag (
background: url(http://defaulticon.com/sites/default/files/styles/icon-front-page-32x32-preview/public/field/image/tag.png) center center no-repeat;
}

Here we simply add a second background for each button, taking the icons from the site defaulticon.com.

That's it. Today we looked at how to create round buttons in css3.

Hello, dear friends. Today I will tell you about two ways that will help you create an animated button for your websites. You've probably seen a lot of these buttons and clicked on them. So, on my blog I periodically recommend affiliate courses and trainings, only those that I have tried myself. And of course I'm interested in statistics, and statistics say that people click on attractive buttons 48% more often than on regular links.

The principle of creating animated buttons using CSS is as follows, there are three provisions. 1 - Initial, 2 - when hovering the cursor and 3 - when pressing the mouse button. Some services have all three provisions, while others have only two. But the main thing is that you are satisfied with the end result.

Video tutorial on the second method of creating animated buttons:

As an example, let's look at the CSS3 ButtonGenerator service; it has just two provisions. But the effects look very good. Who is confused by the lack of Russian language, use the last generator given in the list.

So let's begin.

Opening home page service. Initially, you will see a preliminary view of the button and tools that allow you to make all kinds of settings.

The first section, Text&Font, is responsible for text, font size, font color, font shadow. This is where you write the label on the button, set its size, color, and shadow.

The next section, Background, refers to the background. Here you can specify the button color, button gradient, button size, and background blend.

The Border section is responsible for setting the shadow and borders of the button. You can easily adjust the thickness of the border, the rounding of corners, and the shadow of the button.

The next section, Transform, is responsible for transforming the button - rotation, displacement, distortion.

The next section, Transition, is responsible for the smoothness of the animation. You set these settings in accordance with your button. Actions can be applied to the entire button or to individual layers.

After trying several times, experimenting with the settings and you will understand what's what.

After the initial appearance of the button is configured, you can move on to the next stage. This is a modification of the button when hovering the mouse cursor. To do this, click on the checkbox indicated in the screenshot.

Mouseover options

Now all the changes you make to the settings are for the button that will be displayed when you hover the mouse over it. And these settings depend individually on each button. As an example, I changed the rotation, gradient and shadow color settings.

When the button is ready, you can proceed to installing the button in the article. To do this, install the code in the required place in the article:

Here's our example:

Well, now you know how to easily and quickly make an animated button for a website or blog. Try and implement, it's worth it. If you have any questions, write in the comments, I will try to help.

That's all for today, I wish you good luck. And I’m always glad to see you on the pages of my blog.

P.S. And here is an example of an animated button for Denis Gerasimov’s training “Setting up cold traffic to promote affiliate links.” I completed this training and recommend it to everyone - this is without unnecessary exaggeration, real way making money on affiliate programs. Which is basically what I do.

Popular in the category: