CSS Buttons - Pushy Buttons Usage

Advertisements

Previous Page
Next Page  

Pushy Buttons library is a small CSS Pressable Buttons library.

Loading the bttn.css

To load the pushy-buttons.min.css library, download the css from github and paste the following line in the <head> section of the webpage.

<head>
   <link rel = "stylesheet" href = "pushy-buttons.min.css">
</head>

Using the Button

Create a button using html button tag and add styles btn, btn-blue with size specifier btn-lg.

Live Demo 
<html>
   <head>
      <link rel = "stylesheet" href = "/css_buttons/pushy-buttons.min.css">
   </head>
   
   <body>
      <button class = "btn btn--blue">Submit</button>
   </body>
</html>

It will produce the following output −

Defining the Size

You can increase or decrease the size of an button by defining its size using CSS and using it along with the class name, as shown below. In the given example, we have changes four sizes.

Live Demo 
<html>
   <head>
      <link rel = "stylesheet" href = "/css_buttons/pushy-buttons.min.css">
   </head>
   
   <body>
      <button class = "btn btn--lg btn--blue">Large</button>
      <button class = "btn btn--df btn--blue">Normal</button>
      <button class = "btn btn--md btn--blue">Medium</button>
      <button class = "btn btn--sm btn--blue">Small</button>
   </body>
</html>

It will produce the following output −

Defining the Color

Just like size, you can define the color of the button using CSS. The following example shows how to change the color of the button.

Live Demo 
<html>
   <head>
      <link rel = "stylesheet" href = "/css_buttons/pushy-buttons.min.css">
   </head>
   
   <body>
      <button class = "btn btn--lg btn--red">Large</button>
      <button class = "btn btn--df btn--green">Normal</button>
      <button class = "btn btn--md btn--blue">Medium</button>
   </body>
</html>

It will produce the following output −

Advertisements