Change background while click and hover

Developer
Maharajan
Size
1,740 Kb
Views
4,048
  1. Change background while click and hover Previews
  2. Change background while click and hover HTML Codes
  3. Change background while click and hover CSS Codes

How do I make an change background while click and hover?

What is a change background while click and hover? How do you make a change background while click and hover? This script and codes were developed by Maharajan on 26 January 2023, Thursday.

Change background while click and hover Previews
IQ Test

Change background while click and hover - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Change background while click and hover</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="design_block"><div class="hover_full"></div>
<input type="button" class="btn" value="click me"/>
</div>
</body>
</html>

Change background while click and hover - Script Codes CSS Codes

body { background: #4A9BAD;
}
.design_block
{ margin:0px auto; display:block; width:500px; margin-top:100px;
}
.btn { border-radius: 5px; color: #fff; padding: 8px 16px; background: green 50%; background-size: 100%; border:none; cursor:pointer;
}
.btn:active { background: -webkit-radial-gradient(circle, blue 10%, #fff 10%) 50% no-repeat; background: radial-gradient(circle, blue 10%, #fff 1%) 50% no-repeat; background-size: 1000%; -webkit-transition: all 0.2s ease-in; transition: all 0.2s ease-in;
}
.hover_full
{ width:100px; height:100px; border-radius:50%; background:skyblue 50%; background-size:100%; display:inline-block; margin-right:100px; vertical-align:middle; border:none; cursor:pointer; -webkit-transition: all 0.2s ease-in; transition: all 0.2s ease-in;
}
.hover_full:hover
{
background: -webkit-radial-gradient(circle, blue 10%, #fff 10%) 50% no-repeat; background: radial-gradient(circle, blue 10%, #fff 1%) 50% no-repeat; background-size:1000%;
}
Change background while click and hover - Script Codes
Change background while click and hover - Script Codes
Home Page Home
Developer Maharajan
Username mhrjnsa1
Uploaded January 26, 2023
Rating 3
Size 1,740 Kb
Views 4,048
Do you need developer help for Change background while click and hover?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Maharajan (mhrjnsa1) Script Codes
Name
Parallax scrolling
Boom
Memory game
Locator
Border hover effect
Pure css loader
A Pen by maharajan
Simple register
Simeple snake design
Notification
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!