Stylish css buttons. Pink CSS3 button with Pacifico font

Every day the new standards css3 and html5 are becoming more deeply involved in the lives of layout designers and web developers, and browsers are becoming more compatible with these standards every day.

In connection with this event, I would like to present you with a selection of 10 css3 buttons that can make your life easier when coding and web creation applications.

1. Super Awesome Buttons.

This set The buttons use a set of css3 and also RGBA coloring.

Adding this set of buttons to your page is not difficult, you need to connect css template and add the necessary classes to the links to change their color, shape, etc.

Connection example:

Super Awesome Button" Awesome Blue Button" Awesome Magenta Button" Awesome Red Button" Awesome Orange Button" Awesome Yellow Button"

2. Google Buttons.

These buttons were based on home page Google.com. They are also simple and minimalistic.

Connection example:

Search Google I'm Feeling lucky

3. CSS3 Gradient Buttons.

The buttons are very similar to the Super Awesome Buttons mentioned above. This set is available in several colors (9 colors) and various shapes.

Connection example:

Rectangle or Rounded Can be Medium or Small Button Tag Span

H3

4. Kick-Ass CSS3 Button.

This button is not the most interesting from a design point of view, but at the link below you can watch a video tutorial on creating such buttons, which will be useful for novice web developers.

5. Pure CSS social media icons.

This set is an icon pack social networks, rather than buttons. The set is represented by ten icons of social networks, including Facebook, Twitter, Flickr and others.

Connection example:

• Facebook
• Twitter
• RSS
• Flickr
• Delicious
• LinkedIn
• Google
• Orkut
• Technorati
• NetVibes

6. Extremely fancy CSS3 buttons.

All owners of iOS devices will undoubtedly recognize these buttons; similar buttons have been present in iOS devices since the first versions. These buttons, like many presented here, have color and size settings and are made in pure css3.

Connection example:

Post

7. BonBon: Sweet CSS3 buttons.

Are you a born sweet tooth? Then these buttons are designed for you. They are made in such a way that you just want to eat them, or eventually use them in your project. You will undoubtedly like the different colors, shapes, and conditions.

Connection example:

Label

8. Realistic Looking CSS3 Buttons.

An interesting set of buttons, strict colors, curves, undoubtedly deserves attention.

Connection example:

Pushit

9. Simple CSS3 Github buttons.

You have already seen the implementation of similar buttons earlier on github.com; they are very easy to install, convenient and minimalistic. It is also possible to add icons to buttons.

Connection example:

This is a Button This is a Pill Button Divide by Zero

10. Flexible CSS3 toggle buttons.

These Css3 buttons are made very nicely, but are not practical, as they are implemented only with Firefox support; other browsers, unfortunately, are not supported.

Connection example:

First you need to download the sources and select a design theme for the buttons. You can choose the design that you like. For example, let's take the first theme, winona.

Download

Similar articles on this topic:

Open the file in the editor index.html from the source, we find the tag we are interested in. In my case:

From this code we take a line with the class button.

We paste the code into any necessary place in the file with the code of our project between the tag .
Change the name of the button to the one you need. In my case, I will change the name to “Open”

Copy it and paste it between the tags in your project's index file.

The example shows that a certain style is added to the button using an additional class corresponding to the name of the theme.

In our case this is the class button-winona. Therefore, styles named winona will be added.

This is very convenient, because... if you want to change the design of the buttons, you will only need to replace the name of the additional class in the tag . And the styles are already written in the file button.css!

I have selected some CSS buttons that I think can be used in web projects.

CSS3 Button Generator

Look at the generator CSS3 buttons from Sanwebe:

Pink CSS3 button with Pacifico font

Cute pink button ( apart from a small jQuery code to play music and change internal text ) is completely created based on CSS3:

Collection of 3D buttons

Collection of 3D buttons created with CSS3:

Social 3D Buttons

Excellent social buttons made with CSS3 and icon font:

Animated CSS3 Buttons

Animated CSS buttons with background patterns. May not work in Firefox browsers 3.6 and IE10:

Round Animated CSS3 Buttons

Here are some more animated buttons where rotating the text on mouseover gives a really cool effect:

Clean Circle Buttons

Here's another example of CSS3 round buttons:

Toggle Buttons in CSS3

Well executed radio buttons created with CSS3 and an icon font:

Animated CSS3 Button

Cute 3D button created with CSS3 and Google fonts:

CSS3 Button Effects

These buttons demonstrate animations using various CSS3 properties:

Glossy CSS3 Buttons

Now you can be absolutely sure that glossy buttons can be easily created using CSS3, no more Photoshop:

3D CSS3 Buttons

It's amazing what you can do with the CSS3 :before and :after pseudo-elements. Check out the amazing 3D buttons:

CSS3 switch

Example of a toggle button in CSS3 without using JavaScript:

3D flip button effect

3D flipping effect on button click created with CSS3:

Brand buttons

Beautiful CSS buttons from popular brands using bootstrap icons:

Dark round button

Round button with using jQuery to give a drop effect when pressing a button:

CSS3 switch

Switch created with CSS3:

Beautiful flat buttons

A collection of flat CSS buttons for all occasions, without animation or effects:

Social sharing buttons

A more attractive version of the buttons public access, but without functionality. According to the developer, they should work in IE7+:

Christmas button

A CSS Christmas button using data:urls, a method for embedding an image directly into a document:

Soft button

Round glossy button created with CSS3:

Soft Button

The buttons use only Unicode characters, allowing the use of text or icon fonts:

Large 3D Animated CSS3 Buttons

Another set of 3D animated CSS buttons for websites. The animation is done using the animation and keyframes properties:

Metal CSS3 Buttons

A collection of metallic CSS3 buttons whose symbols were created using the pictos font using @font-face . For the metallic effect, the box-shadow and linear-gradient properties were used:

Round CSS3 Buttons

Another collection of animated round buttons in CSS3:

CSS3 clickable social media buttons

The buttons use simple CSS3 properties such as gradients, box-shadows, text-shadows and so on. The "idle" and "active" states are also included in this set:

Simple CSS3 Buttons

Beautiful CSS Buttons:

3D download button

This 3D button uses a perspective transformation. It only works in webkit based browsers:

Amazing CSS3 Social Media Buttons

Big button

Solid glossy CSS3 button with a shadow effect at the bottom. The button uses a font called Sansita One from the Google collection:

Simple buttons

Some simple CSS buttons:

CSS3 Social Media Buttons

Simple CSS Buttons

A set of simple CSS buttons. They are easy to set up and use. They can be easily integrated with Font-Awesome or another library:

Buttons in the form of a poker chip

An example of a simple button in the form of a poker chip. It can also be used as a button with a hover effect:

Slider button

Concept CSS slider buttons:

Admin menu buttons

Admin panel ( menu or navigation) using CSS3 and the fontawesome framework. When switching to a button, the active class is added using jQuery:

Sewn on button

A simple button with a line that demonstrates the power of CSS3 without using a background image:

Rotating button

Round button with rotating border to indicate mouse hover:

Button in CSS3

Soft button created with CSS3 based on this example:

CSS3 button with sliding card

These CSS buttons look like cards slipping out of a sleeve. They can be used to display information that should be hidden until the user makes a choice:

Animation of CSS3 buttons in the form of candy

Button with animation to display loading status:

CSS3 switches

Beautiful radio buttons that use jQuery to toggle a class:

Glossy buttons

Set of beautiful CSS website buttons. Various properties are used to give a three-dimensional glossy appearance:

Today I want to tell you how to do stylish buttons on 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 set 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:

Button :hover :active Button :hover :active Button :hover :active Button :hover :active

CSS styles for all buttons

Different browsers, some standard ones CSS rules display 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 trends web design. In other words it is 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. Below the button we will place a non-blurred shadow 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 all! Now you have stylish and modern buttons, which 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!