Curriculum

CSS Advanced

CSS Rounded Corners

0/1

CSS Border Images

0/1

CSS Backgrounds

0/1

CSS Colors

0/1

CSS Color Keywords

0/1

CSS Gradients

0/3

CSS Shadow

0/2

CSS Text Effects

0/1

CSS Web Fonts

0/1

CSS 2D Transforms

0/1

CSS 3D Transforms

0/1

CSS Transitions

0/1

CSS Animations

0/1

CSS Tooltip

0/1

CSS Style Images

0/1

CSS Image Reflection

0/1

CSS object-fit

0/1

CSS object-position

0/1

CSS Masking

0/1

CSS Buttons

0/1

CSS Buttons

10 minutes

CSS Pagination

0/1

CSS Multiple Columns

0/1

CSS User Interface

0/1

CSS Variables

0/4

CSS Box Sizing

0/1

CSS Media Queries

0/1

CSS MQ Examples

0/1

CSS Flexbox

0/4

Text lesson

CSS Buttons

Discovering the art of customizing button appearances through CSS styling techniques.

Basic Button Styling

Example

.button {
background-color: #04AA6D; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}

Button Colors

Utilize the background-color attribute to alter the button’s background hue.

Example

.button1 {background-color: #04AA6D;} /* Green */
.button2 {background-color: #008CBA;} /* Blue */
.button3 {background-color: #f44336;} /* Red */
.button4 {background-color: #e7e7e7; color: black;} /* Gray */
.button5 {background-color: #555555;} /* Black */

Button Sizes

Apply the font-size property to adjust the text size of a button.

Example

.button1 {font-size: 10px;}
.button2 {font-size: 12px;}
.button3 {font-size: 16px;}
.button4 {font-size: 20px;}
.button5 {font-size: 24px;}

Employ the padding attribute to modify the padding of a button.

Example

.button1 {padding: 10px 24px;}
.button2 {padding: 12px 28px;}
.button3 {padding: 14px 40px;}
.button4 {padding: 32px 16px;}
.button5 {padding: 16px;}

Rounded Buttons

Utilize the border-radius attribute to incorporate curved edges to a button.

Example

.button1 {border-radius: 2px;}
.button2 {border-radius: 4px;}
.button3 {border-radius: 8px;}
.button4 {border-radius: 12px;}
.button5 {border-radius: 50%;}

Colored Button Borders

Utilize the border attribute to apply a colored border to a button.

Example

.button1 {
background-color: white;
color: black;
border: 2px solid #04AA6D; /* Green */
}
…

Hoverable Buttons

Utilize the :hover selector to adjust the appearance of a button when the mouse moves over it.

Consider utilizing the transition-duration property to specify the speed at which the “hover” effect occurs.

Example

.button {
transition-duration: 0.4s;
}

.button:hover {
background-color: #04AA6D; /* Green */
color: white;
}
…

Shadow Buttons

Utilize the box-shadow property to introduce shadow effects to a button.

Example

.button1 {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

.button2:hover {
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}

Disabled Buttons

Apply the opacity property to introduce transparency to a button, creating a “disabled” appearance.

Additionally, consider incorporating the cursor property with a value of “not-allowed” to display a “no parking sign” when hovering over the button.

Example

.disabled {
opacity: 0.6;
cursor: not-allowed;
}

Button Width

By default, a button’s size is based on its text content, stretching to accommodate it. Modify the width of a button using the width property.

Example

.button1 {width: 250px;}
.button2 {width: 50%;}
.button3 {width: 100%;}

Button Groups

Eliminate margins and apply float:left to each button to form a cohesive button group.

Example

.button {
float: left;
}

Bordered Button Group

Utilize the border property to craft a button group with borders.

Example

.button {
float: left;
border: 1px solid green;
}

Vertical Button Group

Employ the display:block property instead of float:left to arrange the buttons vertically, stacking them underneath each other rather than beside each other.

Example

.button {
display: block;
}

Button on Image

Animated Buttons

Example

Include an arrow when hovering over.

Example

Apply a “pressed” effect when clicked.

Example

Transition to a faded appearance upon hovering.

Example

Incorporate a “ripple” effect upon clicking.