Узнайте, как стиль кнопок с помощью CSS.
Основные стили кнопок
Кнопка по умолчанию Кнопка CSS
Используйте свойство background-color для изменения цвета фона кнопки:
Используйте свойство font-size для изменения размера шрифта кнопки:
Используйте свойство padding для изменения заполнения кнопки:
10px 24px 12px 28px 14px 40px 32px 16px 16px
Используйте свойство border-radius для добавления скругленных углов к кнопке:
Цветные границы кнопок
Используйте свойство border , чтобы добавить цветную рамку к кнопке:
Используйте селектор :hover для изменения стиля кнопки при наведении на нее указателя мыши.
Совет: Используйте свойство transition-duration для определения скорости эффекта «Hover»:
-webkit-transition-duration: 0.4s; /* Safari */
background-color: #4CAF50; /* Green */
Use the box-shadow property to add shadows to a button:
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
Используйте свойство opacity для добавления прозрачности к кнопке (создает «отключенный» вид).
Совет: Вы также можете добавить свойство cursor со значением «not-allowed», которое будет отображать «нет парковки знак» при наведении указателя мыши на кнопку:
По умолчанию размер кнопки определяется по ее текстовому содержимому (так же широко, как и ее содержимое). Используйте свойство width для изменения ширины кнопки:
Удалите поля и добавьте float:left к каждой кнопке, чтобы создать группу кнопок:
Группа кнопок на границе
Используйте свойство border для создания группы кнопок с рамками:
Вертикальная группа кнопок
Используйте display:block вместо float:left для группирования кнопок ниже друг друга, вместо того, чтобы бок о бок:
Button styles inspiration
- Настрочить жалобу в спортлотоPasquale Vitiello
Text styles and hover effects
A couple of creative text styles and hover effects for your inspiration. Some effects use experimental techniques including SVG and Canvas. The post Text styles and hover effects appeared first on Freebiesbug.
Text input effects
Some inspiration for effects on text inputs using CSS transitions, animations and pseudo-elements by Codrops. The post Text input effects appeared first on Freebiesbug.
New subtle hover effects with CSS3
Some new creative and subtle hover effects using modern CSS techniques including 3D translate and pseudo elements. A collection by Codrops. The post New subtle hover effects with CSS3 appeared first on Freebiesbug.
Tooltip styles collection – CSS + SVG
A collection of hover tooltip styles and effects for your inspiration. Using CSS transforms and SVG shapes we can create interesting tooltips The post Tooltip styles collection – CSS + SVG appeared first on Freebiesbug.
Article intro effects
Here is a collection of effects applied to title headers of articles with a fullscreen image created by Codrops. The post Article intro effects appeared first on Freebiesbug.
Button Styles Inspiration
A collection of fresh button styles and effects for your inspiration. We use CSS transitions and pseudo-elements for most of the effects. Today we’d like to share some fresh button styles and effects with you. The current “button trend” is quite exciting since there are a variety of design details in use which allow for […]
Subscribe to newsletter
Best design and frontend links delivered to your inbox every day and week. No spam, unsubscribe at anytime.
Thanks to JotForm for sponsoring us this week. Find out how to become a sponsor
HeyDesigner 2012-2020. Crafted by @tamassari.
Design a call to action button that converts: Tips, best practices, and inspiration
Design is in the details.
The smallest of tweaks can make all the difference between a good design and a great one. This may be especially true for web design. While we might tend to focus on the large photo headers or nice typography in a design, there’s much more going on. In fact, there are people whose jobs are dedicated to studying and testing how users interact with websites — where their eyes travel first, what they click on, how much time they spend on certain pages.
And if you have a website where you’re trying to get visitors to do something — say, buy a product or sign up for a newsletter — then these types of metrics become even more significant.
The design of details like call-to-action buttons (the clickable ones that might say things like “Buy” or “Sign Up”) can have a measurable effect on the way visitors interact with your site (the user experience, or UX) and the results of those interactions. A well-designed call-to-action button should help convert curious visitors into customers, donors, subscribers, or account holders.
So how can you design an effective call-to-action button that entices visitors to follow through? Let’s take a look at some tips and tricks, along with examples from around the web.
How to design a call-to-action button
01. Make it visible: size
If you want visitors to your website to answer your call to action by clicking a button, then that button needs to be highly visible — easy to find at first glance. Making the button large enough to attract attention (in proportion to other elements on the page), yet not so large that it makes the page layout look unbalanced, is key. You can balance the size of the button with other characteristics like shape and color to optimize visibility.
Not sure if your button stands out enough? Try the trusty (if low-tech) “squint test” — step back from your computer screen and squint at the web page so all the details blur and you just see general shapes; if the button still stands out, then you’re in good shape.
02. Make it visible: color
According to Ott Niggulis at ConversionXL, there’s no magic button color that converts the best, but color is still an important choice. Different colors have strong cultural and psychological associations, so you may want to consider those, in addition to making sure your choice harmonizes with any existing color scheme you have for your website.
This color scheme takes a page from traditional color theory by pairing a lime green button with the orangey red hue that dominates the rest of the page. Complementary pairs that are opposites on the color wheel, like red/green and blue/orange, have high visual impact and are sure to attract attention.
Color can also be balanced with size to enhance visibility. For instance, a large button (already easier to see because of its size) could overpower the page if it’s in a bright color; so a more subtle shade may be appropriate. On the other hand, a smaller button might benefit from a bolder shade to make it extra visible.
03. Make it look clickable
Your call to action may be a lost cause if visitors don’t even realize they’re able to click on it. In web design, the use of buttons is more than just a design feature that replicates a real-life, tangible experience — it’s also a functional, interactive tool that users look for and have come to expect when navigating websites.
So it’s important that your button actually looks clickable. Shape is a big consideration here; buttons are most commonly rectangular with either sharp or rounded corners. If you opt for a different shape, you’ll want to make it visually obvious that your button is clickable. Some effective options include using shadows, highlights, or other subtle effects that give the button a slightly 3D appearance.
04. Consider contrast
Contrast is an important quality for any design, but for a call-to-action button, you’ll want to think about it in two ways:
1) Button Color vs. Background Color: If the color of the button blends in with the background color of the webpage, your call to action might get overlooked. You want your button color to stand out sufficiently without clashing with the background or other colors on the page.
In the example below, not only does the dark blue contrast nicely with the yellow background, but the second button (an opt-out alternative to the call to action) has also been made less visible with a golden color that’s similar to the background and comes across as a less appealing option with a clever bit of copywriting.
2) Text Color vs. Button Color: You don’t want users straining to read the text on your button. Aside from picking a legible font at a large enough size, choosing an appropriate color for the text will help enhance readability. You’ll want to avoid colors that are too similar to the button itself and also colors that are just hard to see when paired together (e.g., white text against a yellow button). White against darker colors and black or dark blue against lighter colors are generally safe choices.
05. Pick a good position
After you’ve designed your button, nailing down its placement within the overall page design is the final step. Deciding on a prominent position will depend mostly on your particular page layout.
A general guideline is to place your button “above the fold.” That’s an old newspaper term for placing the most important information on the front page of a paper above the fold, where readers look first. You can apply the same idea to your webpage by positioning your button in the area that visitors first see without having to scroll down. That will usually be at or near the top of the page. Wherever you place your button, surrounding it with some extra white (or blank) space — not crowding it too close to other elements — will help draw attention to the button and give it visual prominence.
What to write on a call-to-action button
01. Address the user directly
Using active verbs that speak to the user and ask them to take a specific action will come across as much more engaging than plain nouns. For example, which do you find more appealing? A button that says “Buy Now” or “Checkout”? Or one that says “Try It for Free” or “Free Trial”? If your audience feels that your call to action is a personal one, they’re more likely to answer it.
02. Create a sense of urgency
But sometimes a personal appeal to users isn’t enough to get them to click that button—you need to give them an incentive. That may be simply in the way you phrase the call to action, using time-sensitive words like “now” or “today.” Or you may want to arrange a limited time offer or, if you’re selling something, limit its availability or set up a temporary discount.
However, while it can be an effective tactic to make visitors think they will be missing out on something if they don’t act immediately, you should actually deliver on any statements or promises you make; don’t purposely (or unintentionally, for that matter) create false impressions with your call to action or mislead users into thinking they’re getting a deal or benefit that they really aren’t.
03. Start a conversation
You never want visitors to your website to feel coerced or manipulated by the language of your call to action. If the tone is friendly and welcoming, they’ll feel more like you’re starting a conversation rather than pushing a sales pitch. Casual, conversational invitations like “Let’s Talk!” or “Join In!”, as in the examples below, communicate positivity and a personal interest in the people you’re hoping to interact with on your website.
04. Keep it short and simple
Your call to action should make it immediately clear what users should expect and what the result of clicking the button will be. Keeping the text on the button short and clear will help avoid any confusion that might cause users to hesitate. Although, sometimes, that might require more explanation than you can fit on the button itself. In that case, you might consider including extra information outside (usually underneath) the button. As you can see in the image below, this will typically be smaller-sized text that adds value for the user and/or offers clarifying information.
05. Add visual cues
Enhancing the text on your button with a visual cue such as an icon or small illustration can help create immediate associations and add clarity. Think, for instance, of a shopping cart/basket for purchases, upward and downward errors for uploads and downloads, etc. If you do add a visual cue, make sure to include enough negative space between any text or other elements and the edges of the button so it doesn’t look overcrowded.
06. Don’t confirm shame
«Confirm shaming» is the practice of putting an opt-out button next to your CTA that insults that reader. You’ve probably seen them: Pop ups that encourage you to sign up for a newsletter. with the alternative being a «No, I don’t like deals» button, instead of a simple «No thanks».
This practice shows contempt for your reader, and that’s never a good idea.
Case studies: what you can learn from A/B testing
Many web designers take advantage of a method called A/B testing to compare the effectiveness of two different design approaches and collect data on how they perform. Those with the know-how can set up a test themselves, or take advantage of tools like the ones listed here. The folks at ContentVerve.com have shared several case studies they conducted on call-to-action buttons. Although what works for one website will not necessarily work for another (that’s why testing is important), let’s look at a few and see if we can pull out any general pointers.
01. Button color:
This test changed an “Add to Cart” button from blue to green and saw a significant increase in sales as a result. It would seem that this is simply a visibility issue — the blue button was the same color as the text, so it blended in; while the green button was both bigger and brighter in color, so it stood out more effectively. The takeaway? Pick a high-visibility color that’s not already featured prominently on the page.
Here’s another button color case study, this time focused on the effect of text and button colors combined:
In this case, the change from a black to yellow font color decreased clicks — I would suggest that this is an example of the text being too similar in color to the button, an issue mentioned earlier in the “Consider Contrast” section. The takeaway? Pick a font color that contrasts well with the button color. Black against lighter colors and white against darker colors usually work well for visibility.
02. Button wording
Being clear and specific about what users should expect from clicking the button (which we also discussed earlier under “Keep It Short and Simple”) presumably helps put visitors at ease and gives them confidence in the process of interacting with websites. That’s certainly what seemed to happen in this test, which changed the wording on a button from “Get your membership” to the more specific “Find your gym & get your membership,” adding the “find your gym” part first, since that’s the first step in the checkout process. The results were dramatic, with a 200+ percent increase in clicks. The takeaway? Create value for users by explaining exactly what’s going to happen (or what they’re going to get) when they click the button.
To sum up…
Details DO matter — in design in general and when creating call-to-action buttons. If this article has inspired you to take a fresh look at your own buttons and maybe change them up a bit, check out this free call-to-action button generator and experiment with different design approaches. As always, happy designing!
Some ideas for modern and subtle button styles and effects
Button Styles Inspiration
Some ideas for modern and subtle button styles and effects
Integrate or build upon it for free in your personal or commercial projects. Don’t republish, redistribute or sell «as-is».
Icons «Vicons» by Victor Erixon. Icon font made with IcoMoon.
Would you tell us more about codrops/ButtonStylesInspiration?
Recommended high-quality free and open source development tools, resources, reading.
Currently tracking 1,463,696 open source projects, 443,034 developers
52 Beautiful CSS3 Buttons with Effects & Tutorials
A nice collection of beautiful css3 buttons with animation effects that are created with the help of web designer easy to find more creative ideas on web design buttons. The effect on the buttons is created using the box-shadow and linear-gradient properties. There are two gradients used basically, one is linear and the second one is radial to make the effect much nicer.
Same effect can be used on navigation bars, buttons etc., and these look great in every major browser except Internet Explorer 8 and below as they do not support the gradients and box shadows. Please take a look at the source code to understand more about them.
Enjoying wonderful new CSS3 properties we can create some amazingly elegant and stylish buttons styles without the smell of an image and have perfectly adequate fall back styles for older browsers. You may like to create your buttons directly in CSS, or you may like to head to your layout tool of choice, but it is important to consider how your button design lives in context .
Those css css3 button that I always think about when i design buttons. I’m not going to share ideas on how to use layer effects in Photoshop, but some simple and general principles of design that can go a long away in optimizing the design of your buttons and other interface in general .
/ best free open source web resources /
Codrops has shared a collection of fresh button styles and effects for your inspiration. They use CSS transitions and pseudo-elements for most of the effects. What they all have in common is simplicity and effect subtleness. They tried to create a balanced set where they don’t animate too much but try to add a sensible effect that goes along with colors and shapes. Some of the styles are a bit bolder — they might fit into some special designs.
Button Design Inspiration, Ideas, Types & How to Make Button for Website
Buttons are one of the most essential components of any user interface design. Attractive button design is useful and essential to trigger click or even sales for any company. These buttons also lead the users smoothly through the website or mobile app. Owing to the attraction that a button adds to any page, special attention is paid to design these buttons with great care whether these buttons are on a simple app or whether we talk of web button designs. There are many principles, tips and tricks to design a perfect button. This article will give you an insight into all essentials that a designer must know for button design or web button design for that matter. This article will also focus on button design ideas and button design inspiration to help you create unique and effective buttons.
Further Reading on CGfrog
What is a Button?
The term ‘button’, also known as the push or the command button is a graphical representation of a control which paves a way for the user to set off a command or an event. This may include options like search, Confirm button etc. The sole aim of creating a button is performing an action fast at just a click. Buttons are a common element of an interaction design.
1. A Button Anatomy
Creating buttons for an app or a website is like creating assets for them, which is often a procedural process. A button is made-up of three main components, which are:
A Button Anatomy
- Text Label
2. The Shape of a Button
A button should look like a button!
The most common question that every designer asks is regarding the shape of a button.
A button is typically rectangular in shape. In some cases, it is also round. However, there is no thumb rule as such. But what is important is that being a designer, you should be able to make a button look like a button. Buttons are simple with just one word written on them, but they may also be descriptive in some cases. By clicking on these buttons using a mouse pointer, the action written on the button can be performed. One can be super creative while creating a button, but the only thing to keep in mind is that a user should be able to identify each button well. A safe bet is though to make buttons square or square with rounded corners. The button design largely depends on the kind or type of the app or website also. The most commonly used and most familiar button shape is – rectangle.
A button should look like a button!
It is important to have visual identifiability of buttons so that users understand that a particular element is a button. This will increase the clickability of it. Irrespective of the shape of the button, a designer must keep in mind that all buttons in a particular UI should be uniform and look alike.
3. Common Uses of Buttons
The following are the uses of a button:
- Buttons often change graphically and look like a mechanical button.
- For some buttons, we have to click just once to finish an action.
- We have to click some buttons more than once to achieve the desired result.
- A button also shows a tooltip when we move the pointer on the button.
4. Common Attributes of a Button
Buttons stand for the action that it performs as a part of the UI. They are the common and the simplest element of interaction between the user and the UI. Though they look like the simplest element, they are packed with numerous attributes. These attributes include the margin, the padding, the border, the border radius, the font style, font size etc. The following picture depicts the common attributes of a button.
The simplest button comprises of many important attributes.
Some Common Examples of a Button Are:
OK button – Confirms an action and closes the current window.
Cancel button – Cancels an action and closes the current window.
Close button – Closes a window after finishing the action performed.
Submit button – Submits a form or application after all the required fields are fulfilled.
Delete button – This button enables one to remove any unwanted files or folders.
Tips for Successful Button Design
1. Button Shape and Designs
Use familiar designs for your buttons
Always use familiar design trends for your button
The shape of a button is important as a button should be easily recognizable and not get merged with the background. A user actually has to make a lot of efforts to decode a button. Here are a few examples of buttons that are familiar to most users:
Among all those examples, the “Filled button with shadows” design is the clearest for users. When users see a dimensionality of an object, they instantly know that it’s something they can press.
2. Design Consistency
A designer should keep in mind the consistency of a button while designing one. The button design should be according to the User Interface and should be in a similar theme.
Design consistency matters a lot
3. Drop Shadow and Highlights
Shadows are important hints that a designer gives to the users which help them identify the clickable objects on a screen. If a button casts a shadow, the user tends to understand that it is an interactive element on the page. This shadow also gives a raised look to the button which makes it distinguishable.
Drop Shadow can make an element stand out against the background and content whereas Highlight accentuates it
If a button casts a subtle shadow, users tend to understand that the element is interactive.
4. Use the Icon to Label Buttons
The user should be able to judge looking at the button as to what function it will perform. This also makes the button identifiable and the user can spot it at a glance. The icon on the button also tells the user about the function it will perform.
Use the icons to label the button and make it noticeable
5. Size and Padding
A button smaller than a finger will not be clickable. So, it is important to decide the right size and the correct finger pad size should be followed. But, when a user uses a mouse, the size of these buttons can be slightly reduced.
Touch targets which are smaller in size are hard to use as compared to the large ones. Finger-friendly buttons for mobile users is preferable
6. Don’t Forget About the Whitespace.
The designer must keep in mind the whitespace on the screen. When the user sees the dimensionality of an object, they instantly think that this element is clickable, Thus, a button design should be done carefully.
7. Size of Buttons
A very significant point to remember in button design is that the size of the buttons should be according to the screen, whether designing for a mobile phone or whether it is web button design. The button should be neither too large nor too small. It should be just the right size!!
Size of Buttons – Buttons should be according to the screen sizes.
8. Avoid Using Too Many Buttons
A designer must prioritize the most important actions and make limited buttons. Too many buttons and actions on the screen will ultimately lead to zero action. Presence of too many buttons also confuses the user.
Do not use too many buttons on one screen
9. Provide Visual or Audio Feedback on Interaction
The UI should respond to the users’ action on a button. If a user clicks on some button, the UI, based on the appropriateness must respond audio or visually. This will ensure proper feedback as well as completion of the action.
10. Apply Contrasting Colors
A button should be identifiable and should not merge with the background. The color should be balanced, it should neither be too bright nor too dull.
Have you ever accidentally clicked on a wrong button?!
Users tend to make wrong decisions when they do not know what to do. So it is important to guide the users in the right direction. Some models prompt the users to act without making anything clear.
The clear color contrast between different buttons is what guides users to choose the right one. If the user is not able to spot the action clearly, his task slows down. It also sometimes leads to the selection of wrong actions which ruins their task. So, find just the appropriate color for your buttons!
Positive, Neutral and Negative Actions
There are three types of actions that every button falls under:
- Positive – This button enables to make changes, send or add information.
- Neutral – This button makes no change as such, it takes users back a screen (e.g. Cancel).
- Negative – This button helps to delete, reset or block information.
The Psychology of Colors
Find the appropriate color for your buttons and make them more useful and effective:
- Red : Power, passion, love, (negative);
- Green :Growth, money, environment (positive);
- Blue : Trust, peace, loyalty, safety, (positive);
- Black: Formality, luxury, sophistication, (neutral);
- Grey :disabled;
- Brown : Outdoors, food, earth;
- Orange : Conf >Purple : Royalty, mystery, spirituality;
Positive Actions Need the Highest Contrast
When Negative Actions Have Highest Contrast
Neutral Actions Have the Lowest Contrast
11. A Thumb Rule – Just Keep it Simple
A button shouldn’t look too busy and one shouldn’t overdo a button. It is always good to have some sort of similarity between the buttons on a single UI. Too complicated buttons are heavy and they do not look good. The more simple, the better it looks!
Follow KISS Rule – Keep it really simple
Dos and Don’ts of Button Design
|Make buttons look like buttons.||Do not label buttons randomly.|
|Label buttons exactly what they do for users.||Do not put buttons where the users can’t find them.|
|The users should be able to interact with the buttons easily.||Do not make buttons of the same UI differently.|
|Follow uniformity and consistency while Button Design for a single UI.||Don’t put too many buttons on one page.|
|Place buttons where users can find them easily or expect them to be.||Ambiguous button labels and placement leads to delayed actions and so they should be avoided.|
|Put buttons in a correct order.||Do not use images as buttons.|
|Make the important button look like it is important.||If there is no requirement as such, do not put buttons unnecessarily.|
Button Design Inspirations
Some cool examples of Button designs
Brilliant example explaining the importance of “Positive Action” “Download Progress Button” by penXcell Beautiful button design showing download Example of delete button with Popup confirmation window Example of Delete button with icons and labels to depict the action
Примеры. Стили кнопок CSS
Предлагаю вашему вниманию неплохую подборку стилей кнопок CSS. Самые различные виды дизайна, оформления весьма станут по вкусу многим. Подборку можно расценивать как для вдохновения или же использовать по прямому назначению. Чтобы создать кнопку CSS достаточно базовых знаний, а при использовании специальных сервисов «Генератор кнопок CSS», то и знаний много не нужно. Есть также и программы в которых можно создавать кнопки CSS «Программы для создания меню CSS». Хоть программы и предназначены для меню, но в них есть возможность создавать отдельные кнопки CSS.
Specifies a combination of button styles. If you create a button using the BUTTON class with the CreateWindow or CreateWindowEx function, you can specify any of the button styles listed below.
|BS_3STATE||Creates a button that is the same as a check box, except that the box can be grayed as well as checked or cleared. Use the grayed state to show that the state of the check box is not determined.|
|BS_AUTO3STATE||Creates a button that is the same as a three-state check box, except that the box changes its state when the user selects it. The state cycles through checked, indeterminate, and cleared.|
|BS_AUTOCHECKBOX||Creates a button that is the same as a check box, except that the check state automatically toggles between checked and cleared each time the user selects the check box.|
|BS_AUTORADIOBUTTON||Creates a button that is the same as a radio button, except that when the user selects it, the system automatically sets the button’s check state to checked and automatically sets the check state for all other buttons in the same group to cleared.|
|BS_BITMAP||Specifies that the button displays a bitmap. See the Remarks section for its interaction with BS_ICON.|
|BS_BOTTOM||Places text at the bottom of the button rectangle.|
|BS_CENTER||Centers text horizontally in the button rectangle.|
|BS_CHECKBOX||Creates a small, empty check box with text. By default, the text is displayed to the right of the check box. To display the text to the left of the check box, combine this flag with the BS_LEFTTEXT style (or with the equivalent BS_RIGHTBUTTON style).|
|BS_COMMANDLINK||Creates a command link button that behaves like a BS_PUSHBUTTON style button, but the command link button has a green arrow on the left pointing to the button text. A caption for the button text can be set by sending the BCM_SETNOTE message to the button.|
|BS_DEFCOMMANDLINK||Creates a command link button that behaves like a BS_PUSHBUTTON style button. If the button is in a dialog box, the user can select the command link button by pressing the ENTER key, even when the command link button does not have the input focus. This style is useful for enabling the user to quickly select the most likely (default) option.|
|BS_DEFPUSHBUTTON||Creates a push button that behaves like a BS_PUSHBUTTON style button, but has a distinct appearance. If the button is in a dialog box, the user can select the button by pressing the ENTER key, even when the button does not have the input focus. This style is useful for enabling the user to quickly select the most likely (default) option.|
|BS_DEFSPLITBUTTON||Creates a split button that behaves like a BS_PUSHBUTTON style button, but also has a distinctive appearance. If the split button is in a dialog box, the user can select the split button by pressing the ENTER key, even when the split button does not have the input focus. This style is useful for enabling the user to quickly select the most likely (default) option.|
|BS_GROUPBOX||Creates a rectangle in which other controls can be grouped. Any text associated with this style is displayed in the rectangle’s upper left corner.|
|BS_ICON||Specifies that the button displays an icon. See the Remarks section for its interaction with BS_BITMAP.|
|BS_FLAT||Specifies that the button is two-dimensional; it does not use the default shading to create a 3-D image.|
|BS_LEFT||Left-justifies the text in the button rectangle. However, if the button is a check box or radio button that does not have the BS_RIGHTBUTTON style, the text is left justified on the right side of the check box or radio button.|
|BS_LEFTTEXT||Places text on the left side of the radio button or check box when combined with a radio button or check box style. Same as the BS_RIGHTBUTTON style.|
|BS_MULTILINE||Wraps the button text to multiple lines if the text string is too long to fit on a single line in the button rectangle.|
|BS_NOTIFY||Enables a button to send BN_KILLFOCUS and BN_SETFOCUS notification codes to its parent window.
Note that buttons send the BN_CLICKED notification code regardless of whether it has this style. To get BN_DBLCLK notification codes, the button must have the BS_RADIOBUTTON or BS_OWNERDRAW style.
|BS_OWNERDRAW||Creates an owner-drawn button. The owner window receives a WM_DRAWITEM message when a visual aspect of the button has changed. Do not combine the BS_OWNERDRAW style with any other button styles.|
|BS_PUSHBUTTON||Creates a push button that posts a WM_COMMAND message to the owner window when the user selects the button.|
|BS_PUSHLIKE||Makes a button (such as a check box, three-state check box, or radio button) look and act like a push button. The button looks raised when it isn’t pushed or checked, and sunken when it is pushed or checked.|
|BS_RADIOBUTTON||Creates a small circle with text. By default, the text is displayed to the right of the circle. To display the text to the left of the circle, combine this flag with the BS_LEFTTEXT style (or with the equivalent BS_RIGHTBUTTON style). Use radio buttons for groups of related, but mutually exclusive choices.|
|BS_RIGHT||Right-justifies text in the button rectangle. However, if the button is a check box or radio button that does not have the BS_RIGHTBUTTON style, the text is right justified on the right side of the check box or radio button.|
|BS_RIGHTBUTTON||Positions a radio button’s circle or a check box’s square on the right side of the button rectangle. Same as the BS_LEFTTEXT style.|
|BS_SPLITBUTTON||Creates a split button. A split button has a drop down arrow.|
|BS_TEXT||Specifies that the button displays text.|
|BS_TOP||Places text at the top of the button rectangle.|
|BS_TYPEMASK||Do not use this style. A composite style bit that results from using the OR operator on BS_* style bits. It can be used to mask out valid BS_* bits from a given bitmask. Note that this is out of date and does not correctly include all valid styles. Thus, you should not use this style.|
|BS_USERBUTTON||Obsolete, but provided for compatibility with 16-bit versions of Windows. Applications should use BS_OWNERDRAW instead.|
|BS_VCENTER||Places text in the middle (vertically) of the button rectangle.|
For illustrations of the principal button styles such as BS_CHECKBOX and BS_GROUPBOX, see Button Types.
The appearance of text or an icon or both on a button control depends on the BS_ICON and BS_BITMAP styles, and whether the BM_SETIMAGE message is sent. The possible results are as follows.