Button component is an enhanced version of the standard HTML <button> element. A button consists of text and/or an image that clearly communicates what action will occur when user clicks or touches it. Propeller button component provides various types of buttons, and allows user to add both display and click effects.

Bootstrap Button Propeller Button Raised Button Flat Button Outline Button Floating Action Button (FAB) Raised Floating Action Button Flat Floating Action Button Button Sizes Button Group Configuration Options

Bootstrap Button

Bootstrap provides different classes for button based upon its purpose. For example - Include Default Button to the code by adding .btn-default.

code 

							

							

								

							

						

					
 
					
					
					

						
 
							
							
							
							
							
							
							
							
							
							
							
							
							
							
							
							
							
							
							
							
						

					
 
					
				
  
			

		
  		
		
		
		

			
			 
			

				

					
Propeller Button

				

				
Propeller button consists of Bootstrap HTML structure with Propeller customized classes based on material design standards. Add .pmd-ripple-effect followed by Bootstrap classes to get ripple effect to button.

			
  
			
			

			
				 
				

					
					
					
 
						code 
					
 
					
					
					

						

							

							
						

						

							

								

							

							

								

							

							

								

							

						

					
 
					
					
					

						
 
							
							
							
							
							
							
							
							
							
							
							
							
							
							
							
							
							
							
							
							
						

					
 
					
				
  
			

		
  		
		
		
		
 
			
			
			

				

					
Raised Button

				

				
Raised Button is used to give prominence to actions in a layouts with a lot of varying content. Include Raised Button to the code by adding .pmd-btn-raised.

			
 
			
			

				
				
				

					
					
					
 
						code 
					
 
					
					
					

						

							

							
						

						

							

								

							

							

								

							

							

								

							

						

					
 
					
					
					

						
 
							
							
							
							
							
							
							
							
							
							
							
							
							
							
							
							
							
							
							
							
						

					
 
					
				
 
			

			 
		
  
		
		
		

			
			
			

				

					
Flat Button

				

				
Flat Button is text-only button. Include Flat Button to the code by adding .pmd-btn-flat.

			
 
			
			

			
				
				

					
					
					
 
						code
					
 
					 
					
					

						

							

							
						

						

							

								

							

							

								

							

							

								

							

						

					
 
					
					
					

						
 
							
							
							
							
							
							
							
							
							
							
							
							
							
							
							
							
							
							
							
							
						

					
 
					
				
 
			

		
 
		
		
		

			
			
			

				

					
Outline Button

				

				
Outline Button is a button with a border rather that background color. It is generally used to define secondary action. Include Outline Button to the code by adding .pmd-btn-outline.

			
 
			
			

			
				
				

					
					
					
 
						code
					
 
					 
					
					

						

							

							
						

						

							

								

							

							

								

							

							

								

							

						

					
 
					
					
					

						
 
							
							
							
							
							
							
							
							
							
							
							
							
							
							
							
							
							
							
							
							
						

					
 
				
 
			

		
 
		 
		
		

			
			
			

				

					
Floating Action Button (FAB)

				

				
Include FAB Button to the code by adding .pmd-btn-fab.

			
 
			
			
			
		
				

				
					
					
 code
					
 
					
					
					

						

							

							
						

						

							

								

							

							

								

							

							

								

							

						

					
 
					
					
					

						
 

							
							
							
							
							
							
							
							
							
							
							
							
							
							
						

					
 
					
				

			
 
		
  
		
		
		

			
			
			

				

					
Raised Floating Action Button

				

				
Include Raised Floating Action Button to the code by adding .pmd-btn-fab .pmd-btn-raised.

			
 
			
			
			

				

				
					
					
 
						code
					
 
					
					
					

						

							

							
						

						

							

								

							

							

								

							

							

								

							

						

					
 

					
					

						
 

							
							
							
							
							
							
							
							
							
							
							
							
							
							
						

					
 
					
				

			
 
		
  
		
		
		

			
			
			

				

					
Flat Floating Action Button

				

				
Include Flat FAB Button to the code by adding .pmd-btn-fab .pmd-btn-flat.

			
 
			
			
			

				

					
					
					
 
						code
					
 
					
					
					

						

							

							
						

						

							

								

							

							

								

							

							

								

							

						

					
 
					
					
					

						
 
							
							
							
							
							
							
							
							
							
							
							
							
							
							
						

					
 
					
				

			
 
		
  
		
		
		

			
			
			

				

					
Button Sizes

				

				
Want Fancy larger or smaller button? Add .btn-lg, .btn-sm for additional sizes.

			
 
			
			
			

				

				
					
					
 
						code
					
 
					
					
					

						

							

							
						

						

							

								

							

							

								

							

							

								

							

						

					
 
					
					
					

						

							
 
								

									
 
										
										
										
										
										
										
										
										
										
										
										
									

									

										
Large button

									

								

								

									
 
										
										
										
										
										
										
										
										
										
										
										
									

									

										
Medium button

									

								

								

									
 
										
										
										
										
										
										
										
										
										
										
										
									

									

										
Small button

									

								

							

						

					
 
					
				

				
 
					
					
					
 
						
						code
					
 
					
					
					

						

							

							
						

						

							

								

							

							

								

							

							

								

							

						

					
 
					
					
					

						

							
 
								
								
								
								
								
							

						

					
 
					
Create block level button—those that span the full width of a parent— by adding .btn-block.

				

			
 
		
 
		
		
		

			
			
			


				

					
Button Group

				

				
Group a series of buttons together on a single line with the button group. Add on optional JavaScript radio and checkbox style behavior with our button plugin.

			
 
			
			
			
 
				

					
					
					

						code
					
 
					
					
					

						

							

							
						

						

							

								

							

							

								

							

							

								

							

						

					
 
					
					
					

						
 
							

								
								
								
							

						

					
 
					
Combine sets of <div class="btn-group"> into a <div class="btn-toolbar"> for more complex components.

				

				
				
				

				
					
					
 
						code
					
 
					
					
					

						

							

							
						

						

							

								

							

							

								

							

							

								

							

						

					
 
					
					
					

						
 
							

								
								
								
							

						

					
 
					
Wrap a series of buttons with .btn in .btn-group.

				

				 
				
				
				

					
					
					
 
						code 
					
 
					
					
					

						

							

							
						

						

							

								

							

							

								

							

							

								

							

						

					
 
					
					
					

						
 
							
 Left Middle Right 

						

					
 
					
With <a> elements, Just wrap a series of .btns in .btn-group.btn-group-justified.

					
				
 
				 
			
 
		
 
		
		
		

			

				

					
Configuration Options

				

				
The Propeller CSS classes apply various predefined visual enhancements to the button. The table lists the available classes and their effects.

			

			
 
				
				

					
 
						

							
								

									Propeller Class
									Effect
									Remark
								

							
							
								

									.pmd-ripple-effect
									Supporting class which, when used with .btn adds a ripple effect to the button.
									Optional
								

								

									.pmd-btn-raised
									Supporting class which, when used with .btn makes the button look raised.
									Optional
								

								

									.pmd-btn-flat
									Supporting class which, when used with .btn makes the button flat.
									Optional
								

								

									.pmd-btn-fab
									Supporting class which, when used with .btn makes it circular.
									Optional
								

								

									.pmd-btn-outline
									Supporting class which, when used with .btn creates a Outline button.
									Optional
								

							
						

					

				
  
				
			

		
  
		
		
		

			

				

					
jQuery plugin

				

				
Call the jQuery plugin to initialize the Button Ripple effect while fetching the data dynamically.