CSS Tutorial

This CSS tutorial is designed for beginners to navigate through the essentials and intricate aspects of CSS styling. Upon finishing this tutorial, participants will possess a comprehensive understanding of CSS, setting a solid foundation for further exploration and mastery. This guide aims to equip you with the skills necessary to transform your visions into visually appealing web designs, laying the groundwork for your journey towards becoming an accomplished web designer.
Buttons
Buttons are interactive elements that allow users to perform actions on your website or application. Buttons are commonly either rectangular or circular in shape and have a text label that says what will happen when you click on them.
To create a CSS button, you will need to use the <button> element in HTML. You can then use CSS to style the button.
A basic HTML structure with button looks as in the following code:
<html>
<head>
</head>
<body>
   <button class="style-button">Click Me</button>
</body>
</html>
Add styles using CSS to your button:
.style-button {
   background-color: pink;
   border: none;
   border-radius: 10px;
   padding: 15px;
   font-size: 16px;
   text-decoration: none;
   cursor: pointer;
}
CSS Buttons - Basic Example
Here is an example of how to use CSS to style buttons and links 
<html>
<head>
<style>
   .style-button {
      background-color: pink;
      border: none;
      padding: 10px;
      margin: 5px;
      font-size: 12px;
      text-decoration: none;
   }
</style>
</head>
<body>
   <button>Basic CSS Button</button>
   <button class="style-button">CSS Styled Button</button>
   <a href="#" class="style-button">CSS Link Button</a>
   <input type="button" class="style-button" value="CSS Input Button">
</body>
</html>
CSS Buttons Colors
Here is an example of how to use CSS to style buttons with different colors 
<html>
<head>
<style>
   .style-button {
      display: inline-block;
      border: none;
      padding: 10px;
      margin: 5px;
      font-size: 12px;
      text-decoration: none;
   }
   .color-pink {
      background-color:pink;
   }
   .color-green {
      background-color: greenyellow;
   }
   .color-violet {
      background-color: violet;
   }
   .color-blue {
      background-color: skyblue;
   }
   .color-yellow {
      background-color: yellow;
   }
</style>
</head>
<body>
   <button class="style-button color-pink">Pink Button</button>
   <button class="style-button color-green">Green Button</button>
   <button class="style-button color-violet">Violet Button</button>
   <button class="style-button color-blue">Blue Button</button>
   <button class="style-button color-yellow">Yellow Button</button>
</body>
</html>
CSS Buttons Sizes
Here is an example of how to use CSS to style buttons with different font sizes 
<html>
<head>
<style>
   .style-button {
      display: inline-block;
      border: none;
      padding: 10px;
      margin: 5px;
      text-decoration: none;
      background-color: violet;
   }
   .size1 {
      font-size: 10px;
   }
   .size2 {
      font-size: 15px;
   }
   .size3 {
      font-size: 20px;
   }
   .size4 {
      font-size: 25px;
   }
   .size5 {
      font-size: 30px;
   }
</style>
</head>
<body>
   <button class="style-button size1">Size 10px</button>
   <button class="style-button size2">Size 15px</button>
   <button class="style-button size3">Size 20px</button>
   <button class="style-button size4">Size 25px</button>
   <button class="style-button size5">Size 30px</button>
</body>
</html>
CSS Buttons Padding
Here is an example of how to add padding to buttons using padding property 
<html>
<head>
<style>
   .style-button {
      display: inline-block;
      border: none;
      font-size: 12px;
      margin: 5px;
      text-decoration: none;
   }
   .padding-style1 {
      padding: 5px 10px;
      background-color: violet;
   }
   .padding-style2 {
      padding: 10px;
      background-color: pink;
   }
   .padding-style3 {
      padding: 10px 20px 10px 20px;
      background-color: violet;
   }
   .padding-style4 {
      padding: 15px 30px;
      background-color: pink;
   }
   .padding-style5 {
      padding: 30px 15px;
      background-color: violet;
   }
</style>
</head>
<body>
   <button class="style-button padding-style1">Padding 5px 10px</button>
   <button class="style-button padding-style2">Padding 10px</button>
   <button class="style-button padding-style3">Padding 10px 20px 10px 20px</button>
   <button class="style-button padding-style4">Padding 15px 30px</button>
   <button class="style-button padding-style5">Padding 30px 15px</button>
</body>
</html>
CSS Rounded Buttons
Here is an example of how to create rounded corner buttons using the border-radius CSS property 
<html>
<head>
<style>
   .style-button {
      display: inline-block;
      border: none;
      font-size: 12px;
      text-decoration: none;
      padding: 10px;
      margin: 5px;
   }
   .border-style1 {
      border-radius: 10px;
      background-color: violet;
   }
   .border-style2 {
      border-radius: 20px;
      background-color: pink;
   }
   .border-style3 {
      border-radius: 50%;
      background-color: violet;
   }
</style>
</head>
<body>
   <button class="style-button border-style1">border-radius: 10px</button>
   <button class="style-button border-style2">border-radius: 20px</button>
   <button class="style-button border-style3">circle</button>
</body>
</html>
CSS Colored Button Border
Here is an example of how to create buttons with different border colors using border property 
<html>
<head>
<style>
   .style-button {
      display: inline-block;
      font-size: 12px;
      text-decoration: none;
      padding: 10px;
      margin: 5px;
      background-color: white; 
   }
   .border-style1 {
      border: 3px solid red;
   }
   .border-style2 {
      border: 3px solid yellow;
   }
   .border-style3 {
      border: 3px solid green;
   }
   .border-style4 {
      border: 3px solid pink;
   }
</style>
</head>
<body>
   <button class="style-button border-style1">Red Border</button>
   <button class="style-button border-style2">Yellow Border</button>
   <button class="style-button border-style3">Green Border</button>
   <button class="style-button border-style4">Pink Border</button>
</body>
</html>
CSS Hoverable Buttons
Here is an example of how to create hoverable buttons using :hover pseudo-class 
<html>
<head>
<style>
   .style-button {
      display: inline-block;
      font-size: 12px;
      text-decoration: none;
      padding: 10px;
      margin: 5px;
   }
   .hover-style1 {
      background-color: pink;
      border: none;
   }
   .hover-style2 {
      border: 3px solid yellow;
      background-color: white; 
   }
   .hover-style1:hover {
      border: 3px solid pink;
      background-color: white; 
   }
   .hover-style2:hover {
      background-color: yellow;
   }
</style>
</head>
<body>
   <button class="style-button hover-style1">Hover Button</button>
   <button class="style-button hover-style2">Hover Button</button>
</body>
</html>
CSS Shadow Buttons
Here is an example of how to create buttons with drop shadows using box-shadow property 
<html>
<head>
<style>
   .style-button {
      display: inline-block;
      font-size: 12px;
      text-decoration: none;
      padding: 10px;
      margin: 10px;
      border: none;
   }
   .shadow-style1 {
      background-color: pink;
      box-shadow: 0 5px 10px 0 red; 
   }
   .shadow-style2 {
      background-color: yellow;
   }
   .shadow-style2:hover {
      background-color: yellow;
      box-shadow: 0 5px 10px 0 orange;
   }
</style>
</head>
<body>
   <button class="style-button shadow-style1">Shadow Button</button>
   <button class="style-button shadow-style2">Hover Shadow Button</button>
</body>
</html>
CSS Disabled Buttons
Here is an example of how to create a disabled button by setting the cursor to not-allowed 
<html>
<head>
<style>
   .style-button {
      display: inline-block;
      font-size: 12px;
      text-decoration: none;
      padding: 10px;
      margin: 5px;
      border: none;
      background-color: pink;
   }
   .normal-button {
      cursor: pointer;
   }
   .disable-button {
      opacity: 0.5;
      cursor: not-allowed;
   }
</style>
</head>
<body>
   <button class="style-button normal-button">Click Me</button>
   <button class="style-button disable-button disabled">Disable Button</button>
</body>
</html>
CSS Buttons Width
Here is an example of how to create buttons with different widths 
<html>
<head>
<style>
   .style-button {
      display: inline-block;
      font-size: 12px;
      text-decoration: none;
      padding: 10px;
      border: none;
      margin: 5px;
   }
   .button-width-px {
      background-color: pink;
      width: 200px;
   }
   .half-width-button {
      background-color: violet;
      width: 50%;
   }
   .full-width-button {
      background-color: yellow;
      width: 100%;
   }
</style>
</head>
<body>
   <button class="style-button button-width-px">Width: 200px</button><br>
   <button class="style-button half-width-button">Half Width Button</button>
   <button class="style-button full-width-button">Full Width Button</button>
</body>
</html>
CSS Buttons Groups
Here is an example of how to create a horizontal button group by removing the margins and adding the float: left property to each button 
<html>
<head>
<style>
   .button-group {
      display: flex; 
      justify-content: center;
      float: left; 
   }
   .style-button {
      background-color: yellow;
      border: none;
      padding: 10px 20px;
      float: left;
      text-align: center;
      text-decoration: none;
      font-size: 16px;
   }
   .style-button:hover {
      background-color: orange;
   }
</style>
</head>
<body>
   <div class="button-group">
      <button class="style-button">Submit</button>
      <button class="style-button">Cancel</button>
      <button class="style-button">Reset</button>
   </div>
</body>
</html>
CSS Border Buttons Groups
Here is an example of how to create a border button group by using border property 
<html>
<head>
<style>
   .button-group {
      display: flex; 
      justify-content: center;
      float: left; 
   }
   .style-button {
      background-color: yellow;
      border: 2px solid orange;
      padding: 10px 20px;
      float: left;
      text-align: center;
      text-decoration: none;
      font-size: 16px;
   }
   .style-button:hover {
      background-color: violet;
   }
</style>
</head>
<body>
   <div class="button-group">
      <button class="style-button">Submit</button>
      <button class="style-button">Cancel</button>
      <button class="style-button">Reset</button>
   </div>
</body>
</html>
CSS Vertical Buttons Groups
Here is an example of how to create a vertical button group by seeting display: block and float: left property 
<html>
<head>
<style>
   .button-group { 
      justify-content: center;
      float: left; 
   }
   .style-button {
      background-color: yellow;
      border: 2px solid orange;
      padding: 10px 20px;
      text-align: center;
      display: block;
      text-decoration: none;
      font-size: 16px;
      width: 100px; 
   }
   .style-button:hover {
      background-color: violet;
   }
</style>
</head>
<body>
   <div class="button-group">
      <button class="style-button">Home</button>
      <button class="style-button">Blog</button>
      <button class="style-button">Setting</button>
   </div>
</body>
</html>
CSS Buttons on Image
Here is an example of how to overlay a button on top of an image using relative positioning 
<html>
<head>
<style>
   .image-container {
      position: relative;
      display: inline-block;
   }
   .image {
      width: 300px;
      height: 200px;
   }
   .button {
      position: absolute;
      top: 40%;
      left: 30%;
      background-color: yellow;
      border: none;
      padding: 15px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 15px; 
   }
   .button:hover {
      background-color: orange;
   }
</style>
</head>
<body>
   <div class="image-container">
      <img class="image" src="images/tree.jpg" alt="Your Image">
      <button class="button" href="#">Click Me</button>
   </div>
</body>
</html>
CSS Animated Buttons
Here is an example of how to create animated effect on a button 
<html>
<head>
<style>
   .arrow-button {
      display: inline-block;
      padding: 15px;
      background-color: violet;
      border: none;
      text-align: center;
      text-decoration: none;
      font-size: 20px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
   }
   .arrow-button::before {
      content:"";
      position: absolute;
      width: 0;
      height: 100%;
      top: 0;
      left: 0;
      background-color: pink;
      transition: width 0.3s ease-in-out;
   }
   .arrow-button:hover::before {
      width: 100%;
   }
   .arrow-icon::after {
      content: '\2192'; 
      margin-left: 10px;
   }
</style>
</head>
<body>
   <button class="arrow-button" href="#">Hover Me<span class="arrow-icon"></span></button>
</body>
</html>
CSS Button Press Effect
Here is an example of how to add a pressed effect to the button when it is clicked 
<html>
<head>
<style>
   .style-button {
      display: inline-block;
      padding: 15px;
      background-color: pink;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      transition: background-color 0.3s ease, transform 0.1s ease;
   }
   .style-button:hover {
      background-color: violet;
   }
   .style-button:active {
      transform: translateY(2px);
      background-color: yellow;
   }
</style>
</head>
<body>
   <button class="style-button">Press Me</button>
</body>
</html>
CSS Button Fade In Effect
Here is an example of how to add a fade in effect to the button when it is hover 
<html>
<head>
<style>
   .style-button {
      display: inline-block;
      padding: 15px;
      background-color: violet;
      border: none;
      border-radius: 5px;
      cursor: pointer;
   }
   .style-button:hover {
      opacity: 0.5;
   }
</style>
</head>
<body>
   <button class="style-button">Hover Me</button>
</body>
</html>
CSS Button Ripple Effect
Here is an example of how to add a ripple effect to the button when it is clicked 
<html>
<head>
<style>
   .style-button {
      display: inline-block;
      padding: 15px;
      position: relative;
      background-color: violet;
      border: none;
      border-radius: 5px;
      overflow: hidden;
      cursor: pointer;
   }
   .style-button:after {
      content: "";
      background: pink;
      display: block;
      position: absolute;
      padding-top: 200%;
      padding-left: 250%;
      margin-left: -15px !important;
      margin-top: -100%;
      opacity: 0;
      transition: transform 0.3s, opacity 0.3s;
   }
   .style-button:active:after {
      padding: 0;
      margin: 0;
      opacity: 1;
      transition: 0s;
   }
</style>
</head>
<body>
   <button class="style-button">Click Me</button>
</body>
</html>
﻿
﻿
﻿
﻿
﻿
﻿
﻿
CSS Tutorial

CSS Advanced

CSS3 Tutorial

CSS Responsive

CSS References

CSS tools

CSS Resources

CSS Tutorial

Buttons

CSS Buttons - Basic Example

CSS Buttons Colors

CSS Buttons Sizes

CSS Buttons Padding

CSS Rounded Buttons

CSS Colored Button Border

CSS Hoverable Buttons

CSS Shadow Buttons

CSS Disabled Buttons

CSS Buttons Width

CSS Buttons Groups

CSS Border Buttons Groups

CSS Vertical Buttons Groups

CSS Buttons on Image

CSS Animated Buttons

CSS Button Press Effect

CSS Button Fade In Effect

CSS Button Ripple Effect
