Beautiful css switch. Making stylish buttons. Basic CSS Code
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.
Open the main page of the 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 - without unnecessary exaggeration, this is a real way to make money on affiliate programs. Which is basically what I do.
Good day, dear readers. On this day we will create a set of beautiful icons for the site using CSS3 and animation. Thanks to this button, you can turn any link on the page into an animated button with a simple class name. In general, there is nothing complicated here, as at first glance.
Just a reminder that these buttons are free and you can free download. Let's go.
Animated CSS3 buttons for your website
Now a few words about the size and rounded corners of the buttons:
/* Three button sizes */ .button.big ( font-size:30px;) .button.medium ( font-size:18px;) .button.small ( font-size:13px;) /* Rounded button corners */ .button.rounded( -moz-border-radius:4em; -webkit-border-radius:4em; border-radius:4em; )
In the code above there are three classes - these are big, medium And small. Accordingly, we set different values in pixels for each class. Everything is clearly visible in the code above.
Now comes the fun part - the colors. Here, in principle, there is nothing complicated either.
/* Blue button */ .blue.button( color:#0f4b6d !important; border:1px solid #84acc3 !important; /* Backup background color */ background-color: #48b5f2; background-image: url("button_bg. png"), url("button_bg.png"), -moz-radial-gradient(center bottom, circle, rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px), -moz-linear-gradient(# 4fbbf7, #3faeeb); background-image: url("button_bg.png"), url("button_bg.png"), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from (rgba(89,208,244,1)), to(rgba(89,208,244,0))), -webkit-gradient(linear, 0% 0%, 0% 100%, from(#4fbbf7), to(#3faeeb)); ) .blue.button:hover( background-color:#63c7fe; background-image: url("button_bg.png"), url("button_bg.png"), -moz-radial-gradient(center bottom, circle, rgba (109,217,250,1) 0,rgba(109,217,250,0) 100px), -moz-linear-gradient(#63c7fe, #58bef7); background-image: url("button_bg.png"), url("button_bg.png" ), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(109,217,250,1)), to(rgba(109,217,250,0))), -webkit-gradient(linear , 0% 0%, 0% 100%, from(#63c7fe), to(#58bef7)); )
That's all for now. I would like to warn you in advance that currently the buttons may not work in some browsers because not all of them support CSS3 yet. But it seems to me that this problem will soon be solved.
Today I want to tell you how to make stylish buttons using pure CSS. We will create 4 styles, these are buttons filled with one color, buttons that are surrounded by a border, a button style with a shadow and fill, and the last 4 style is buttons with a click effect. We will do all this goodness without using any scripts, using only CSS.
Demo Ι
HTML code for buttons
The HTML code we will use is very simple. For each of the buttons we will define separate classes. We will also set classes for applying the effect when hovering and activating our future button. In general, here is the code itself:
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 you 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!
Before we look at the buttons, let’s look at the settings common to all of them.
HTML
The buttons will use very simple HTML code:
Subscribe
CSS
Also, all buttons will have common settings for the caption text and deselect links:
ButtonText ( font: 18px/1.5 Helvetica, Arial, sans-serif; color: #fff; ) a ( color: #fff; text-decoration: none; )
Typically, the user expects a fairly soft effect when hovering the mouse over a link or button. And in our case, the button changes size - it increases, showing an additional message.
Basic CSS Code
To begin with, we only need to give the button a shape and color. Define a height of 28px and a width of 115px, add margins and padding, and also give the button a light border.
#button1 ( background: #6292c2; border: 2px solid #eee; height: 28px; width: 115px; margin: 50px 0 0 50px; padding: 0 0 0 7px; overflow: hidden; display: block; )
CSS3 Effects
Some people like it when a simple button is accompanied by quite a lot of CSS code. This section provides additional CSS3 styles for our button. You can do without them, but they give the button a more modern look.
Round the corners of the frame and add a gradient. This uses a little trick with a dark gradient that interacts with any background color.
/*Rounded corners*/ -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; /*Gradient*/ background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
CSS Animation
Now let's set up the CSS transition. The animation will be used for any property changes and will last half a second.
Mouse over
All that remains is to add a style to expand the button when you hover the mouse over it. The button must be 230px wide to display the entire message.
#button1:hover ( width: 230px; )
Simple change of color tone
A very simple and popular CSS effect for a button. When you hover the mouse cursor, the tone of the background color smoothly changes.
Basic CSS Code
The CSS code is very similar to the previous example. A different background color is used and the shape is slightly changed. It also centers the text and sets the line height for the button so that vertical centering occurs.
#button2 ( background: #d11717; border: 2px solid #eee; height: 38px; width: 125px; margin: 50px 0 0 50px; overflow: hidden; display: block; text-align: center; line-height: 38px; )
CSS3 Effects
Set the rounding of corners, a gradient for the background and an additional shadow. Using rgba we make the shadow black and transparent.
/*Rounded corners*/ -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; /*Gradient*/ background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); /*Shadow*/ -webkit-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2); box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);
CSS Animation
The animation is practically no different from the previous example.
/*Transition*/ -webkit-transition: All 0.5s ease; -moz-transition: All 0.5s ease; -o-transition: All 0.5s ease; -ms-transition: All 0.5s ease; transition: All 0.5s ease;
Mouse over
When hovering the mouse cursor, a different background color will be set. Try choosing a lighter color option in Photoshop for a great effect.
#button2:hover ( background-color: #ff3434; )
This effect can be quite impressive depending on the choice of background image. The demo uses a nondescript background and the effect looks nondescript. Try using a different picture and the effect may be stunning.
Basic CSS Code
The main part of the code is the same as the previous examples. Please note that we are using a background image. The initial background position is set to "0 0". When you hover the cursor, the position shifts vertically.
#button3 ( background: #d11717 url("bkg-1.jpg"); background-position: 0 0; text-shadow: 0px 2px 0px rgba(0, 0, 0, 0.3); font-size: 22px; height : 58px; width: 155px; margin: 0 0 50px; display: block; line-height: 58px;
CSS3 Effects
There is nothing special in this example - rounded corners and shadows.
/*Rounded corners*/ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; /*Shadow*/ -webkit-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2); box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);
CSS Animation
The animation for this case lasts longer to create a smooth and interesting effect.
/*Transition*/ -webkit-transition: All 0.8s ease; -moz-transition: All 0.8s ease; -o-transition: All 0.8s ease; -ms-transition: All 0.8s ease; transition: All 0.8s ease;
Mouse over
Now it's time to move the background image. The starting position was "0 0". Set the second parameter to 150px. To shift horizontally, you need to change the first parameter.
#button3:hover ( background-position: 0px 150px; )
3D button press simulation
The last example in our lesson is about the popular 3D method of simulating a button press when hovering the mouse cursor over it. The animation for this case is so simple that it doesn't even require a CSS transition. But the end result is quite impressive.
Basic CSS Code
CSS code for our button.
#button4 ( background: #5c5c5c; text-shadow: 0px 2px 0px rgba(0, 0, 0, 0.3); font-size: 22px; height: 58px; width: 155px; margin: 50px 0 0 50px; overflow: hidden ; display: block; text-align: line-height: 58px;
CSS3 Effects
In this case, CSS3 ceases to be a nice option. To achieve the effect, shadows and a gradient are required. A sharp shadow creates the appearance of a 3D button.
/*Rounded corners*/ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; /*Shadow*/ -webkit-box-shadow: 0px 6px 0px rgba(0, 0, 0, 0.8); -moz-box-shadow: 0px 6px 0px rgba(0, 0, 0, 0.8); box-shadow: 0px 6px 0px rgba(0, 0, 0, 0.8); /*Gradient*/ background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
Mouse over
In this case we have the largest hover section. The length of the shadow is reduced and the margins are used to create a blend of the dark area. All together creates the illusion of pressing a button. Flipping the gradient enhances the effect.
#button4:hover ( margin-top: 52px; /*Shadow*/ -webkit-box-shadow: 0px 4px 0px rgba(0, 0, 0, 0.8); -moz-box-shadow: 0px 4px 0px rgba(0 , 0, 0, 0.8); box-shadow: 0px 4px 0px rgba(0, 0, 0, 0.8); /*Gradient*/ background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)); background-image: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4 )); background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)); background-image: -ms-linear-gradient( bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)); background-image: linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4));
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
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.