MODULE 3 – CSS Fundamentals

🔗 Lesson 3.8 – Styling Links & Buttons

🎨 Creating Attractive Hyperlinks, Buttons, and Hover Effects

🎯 Learning Objectives

After completing this lesson, students will be able to:

✅ Understand Hyperlinks and Buttons

✅ Style Links Using CSS

✅ Remove Underlines from Links

✅ Change Link Colors

✅ Use Hover Effects

✅ Create Professional Buttons

✅ Design Call-to-Action Buttons

✅ Build Modern Website Navigation

📖 Introduction

Imagine a website containing:

 
Home
About
Contact
Services
 

Simple text links look boring.

Now imagine:

 
[ Home ] [ About ] [ Services ] [ Contact ]
 

Beautiful colors.

Hover effects.

Professional design.

This is done using:

🔗 Link Styling

and

🎨 Button Styling

🤔 What are Links?

Links help users move from one page to another.

HTML uses:

<a>

tag for links.

Example

<a href="https://www.google.com">

Google

</a>

Default Link Appearance

Browser shows:

 
Blue Color

Underline
 

Example

<a href="#">

Home

</a>

Output

Blue underlined link.

🎯 Styling Links Using CSS

Example

a{

color:red;

}

Result

Link becomes red.

HTML

<a href="#">

Home

</a>

CSS

a{

color:blue;

}

Output

Blue link.

🌟 Removing Underline

Professional websites usually remove underlines.

Syntax

text-decoration:none;

Example

a{

text-decoration:none;

}

Result

Link appears without underline.

Example

a{

color:blue;

text-decoration:none;

}

🎨 Changing Link Font

Example

a{

font-size:20px;

font-weight:bold;

}

Result

Large bold link.

🎯 Link States

CSS provides special states for links.

1️⃣ Normal Link

a:link{

color:blue;

}

2️⃣ Visited Link

a:visited{

color:purple;

}

Meaning

After clicking:

Link becomes purple.

3️⃣ Hover Link

Most important.

Syntax

a:hover{

color:red;

}
 

Meaning

When mouse moves over link:

Color changes.

Example

a:hover{

color:red;

}

Result

Blue → Red on hover.

4️⃣ Active Link

When user clicks.

a:active{

color:green;

}

Link State Order

Professional order:

 
a:link

a:visited

a:hover

a:active
 

🌟 Complete Link Example

HTML

<a href="#">

Home

</a>

CSS

a{

text-decoration:none;

font-size:20px;

font-weight:bold;

}

a:link{

color:blue;

}

a:hover{

color:red;

}

Output

Blue Link

Hover → Red

No Underline

🎯 What is a Button?

Buttons allow users to:

✅ Submit Forms

✅ Navigate Pages

✅ Perform Actions

HTML Button

 
<button>

Click Me

</button>
 

Default Button

Simple gray button.

🌟 Styling Buttons

Example

button{

background-color:blue;

color:white;

}

Result

Blue button with white text.

🎨 Button Background Color

Example

button{

background-color:green;

}

Button Text Color

Example

button{

color:white;

}

🔠 Button Font Size

Example

button{

font-size:18px;

}

📏 Button Padding

Makes button bigger.

Example

button{

padding:10px;

}

Result

Larger button.

🌟 Rounded Buttons

Example

button{

border-radius:10px;

}

Result

Rounded corners.

Example

button{

border-radius:25px;

}

Result

Pill-shaped button.

🎯 Button Border

Example

button{

border:2px solid blue;

}

Result

Blue border around button.

🎯 Button Hover Effect

Most important effect.

Example

button:hover{

background-color:red;

}

Result

Mouse Hover:

Blue → Red

Example

button:hover{

cursor:pointer;

}

Result

Hand cursor appears.

🌟 Professional Button Example

HTML

<button>

Register Now

</button>

CSS

button{

background-color:blue;

color:white;

font-size:18px;

padding:12px 25px;

border:none;

border-radius:10px;

}

button:hover{

background-color:darkblue;

cursor:pointer;

}

Output

Modern Professional Button

🎯 Call-to-Action Button

CTA means:

Call To Action

Examples:

 
Register Now

Join Course

Learn More

Contact Us

Buy Now
 

Example

button{

background-color:orange;

color:white;

font-size:20px;

padding:15px 30px;

border-radius:30px;

}

Result

Eye-catching button.

💻 Complete Example Program

HTML

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" href="style.css">

</head>

<body>

<h1>NextGen Dev Hub</h1>

<a href="#">Home</a>

<a href="#">Courses</a>

<a href="#">Contact</a>

<br><br>

<button>

Register Now

</button>

</body>

</html>

CSS

body{

font-family:Arial;

}

a{

text-decoration:none;

color:blue;

font-size:20px;

margin:15px;

}

a:hover{

color:red;

}

button{

background-color:green;

color:white;

font-size:18px;

padding:10px 20px;

border:none;

border-radius:10px;

}

button:hover{

background-color:darkgreen;

cursor:pointer;

}

🎯 Expected Output

✅ Styled Navigation Links

✅ Hover Effects

✅ Professional Button

✅ Modern Appearance

🏫 Real World Example

College Website

 
Home

About

Courses

Contact
 

Styled navigation links.

Online Course Website

 
Enroll Now
 

Professional CTA button.

E-Commerce Website

 
Buy Now

Add to Cart
 

Styled buttons.

⚠️ Common Beginner Mistakes

Mistake 1

Not Removing Underlines

Default links look outdated.

Use:

text-decoration:none;

Mistake 2

Using Very Bright Colors

Wrong:

background-color:yellow;

color:white;

Hard to read.

Use good contrast.

Mistake 3

No Hover Effect

Buttons look inactive.

Always add:

 
:hover
 

🌟 Best Practices

✅ Remove unnecessary underlines.

✅ Use hover effects.

✅ Use rounded buttons.

✅ Maintain consistent colors.

✅ Use CTA buttons for important actions.

🏆 Mini Project – Navigation Menu

Create:

 
Home

About

Services

Contact
 

Apply:

✅ Blue Links

✅ No Underlines

✅ Hover Red

Create:

 
Register Now
 

Button with:

✅ Green Background

✅ White Text

✅ Rounded Corners

📝 Practical Activity

Create a webpage containing:

Navigation Menu

Home

About

Courses

Contact

Button

Enroll Now

Apply:

✅ Hover Effects

✅ Rounded Corners

✅ Professional Colors

Run it in Chrome Browser.

📋 Assignment

Assignment 3.8

  1. What is a hyperlink?
  2. Which HTML tag creates links?
  3. How do you remove underlines from links?
  4. What does :hover do?
  5. What is a CTA button?
  6. Create a navigation menu using styled links.
  7. Create a professional button with hover effects.

🧠 Quiz

Q1. Which tag creates hyperlinks?

A. <link>

B. <a>

C. <href>

D. <url>

✅ Answer: B

Q2. Which property removes underlines?

A. remove-line

B. underline:none

C. text-decoration:none

D. text:none

✅ Answer: C

Q3. Which pseudo-class applies styles when the mouse moves over an element?

A. active

B. hover

C. click

D. focus

✅ Answer: B

Q4. Which property changes button background color?

A. color

B. button-color

C. background-color

D. fill

✅ Answer: C

Q5. Which property creates rounded corners?

A. corner

B. radius

C. border-radius

D. round

✅ Answer: C

📌 Lesson Summary

✅ Links are created using the <a> tag.

✅ CSS can change link colors and remove underlines.

✅ :hover creates interactive effects.

✅ Buttons can be customized using colors, borders, padding, and border-radius.

✅ Professional websites use hover effects and CTA buttons.

✅ Styled links and buttons improve user experience.

PreviousNext