JSCSS

Developer
Hampus Persson
Size
3,963 Kb
Views
16,192
  1. JSCSS Previews
  2. JSCSS HTML Codes
  3. JSCSS CSS Codes
  4. JSCSS JS Codes

How do I make an jscss?

What is a jscss? How do you make a jscss? This script and codes were developed by Hampus Persson on 23 December 2022, Friday.

JSCSS Previews
IQ Test

JSCSS - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>JSCSS</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <a class="MovingButton" href="#" data-title="Moving Button"></a> <script src="js/index.js"></script>
</body>
</html>

JSCSS - Script Codes CSS Codes

.MovingButton { position: relative; display: inline-block; padding: 10rem 15rem; text-decoration: none; text-align: center; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; color: #212121; font-size: var(--fontSize, 4rem);
}
.MovingButton::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; will-change: transform; box-shadow: 0 2px 5px rgba(0, 0, 0, .2); background: rgba(210,255,82,1); background: -webkit-linear-gradient(left, rgba(210,255,82,1) 0%, rgba(145,232,66,1) 100%); background: linear-gradient(to right, rgba(210,255,82,1) 0%, rgba(145,232,66,1) 100%); -webkit-transform:	translateY(var(--translateY, 0))	rotateX(var(--rotateX, 0))	rotateY(var(--rotateY, 0))	translateZ(var(--translateZ, -12px)); transform:	translateY(var(--translateY, 0))	rotateX(var(--rotateX, 0))	rotateY(var(--rotateY, 0))	translateZ(var(--translateZ, -12px));
}
.MovingButton:hover::before { box-shadow: 0 3px 10px rgba(0, 0, 0, .25);
}
.MovingButton::after { content: attr(data-title); display: inline-block; position: relative; font-weight: 300; -webkit-transition: -webkit-transform .1s ease; transition: -webkit-transform .1s ease; transition: transform .1s ease; transition: transform .1s ease, -webkit-transform .1s ease; -webkit-transform:	translateY(var(--translateY, 0))	rotateX(var(--rotateX, 0))	rotateY(var(--rotateY, 0)); transform:	translateY(var(--translateY, 0))	rotateX(var(--rotateX, 0))	rotateY(var(--rotateY, 0));
}
body { height: 100vh; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: perspective(800px); transform: perspective(800px); font-family: sans-serif;
}

JSCSS - Script Codes JS Codes

'use strict';
var docStyle = document.documentElement.style;
var MovingButton = document.querySelector('.MovingButton');
var boundingClientRect = MovingButton.getBoundingClientRect();
// React to every mouse move over the moving button
MovingButton.addEventListener('mousemove', function (e) {	// Get the cursor position in relation to the button	var x = e.clientX - boundingClientRect.left;	var y = e.clientY - boundingClientRect.top;	// Get the center points of the button	var xc = boundingClientRect.width / 2;	var yc = boundingClientRect.height / 2;	// Get the delta between cursor and center	var dx = x - xc;	var dy = y - yc;	// Set rotation transformations	// -15 and 60 are magical numbers that made it look good	docStyle.setProperty('--rotateX', dy / -20 + 'deg');	docStyle.setProperty('--rotateY', dx / 80 + 'deg');
});
// Reset the styling when the cursor is leaves the button
MovingButton.addEventListener('mouseleave', function () {	docStyle.setProperty('--translateY', '0');	docStyle.setProperty('--rotateX', '0');	docStyle.setProperty('--rotateY', '0');
});
// Add a click effect on mouse down
MovingButton.addEventListener('mousedown', function () {	docStyle.setProperty('--translateZ', '-20px');	docStyle.setProperty('--fontSize', '3.8rem');
});
// Reset the click effect
document.body.addEventListener('mouseup', function () {	docStyle.setProperty('--translateZ', '-12px');	docStyle.setProperty('--fontSize', '4rem');
});
JSCSS - Script Codes
JSCSS - Script Codes
Home Page Home
Developer Hampus Persson
Username hmps
Uploaded December 23, 2022
Rating 3
Size 3,963 Kb
Views 16,192
Do you need developer help for JSCSS?

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!

Hampus Persson (hmps) Script Codes
Name
Pure CSS GitHub ribbon
Inputs with floating labels
Drill down table
A Pen by Hampus Persson
Notifications
FlowText.js
Slide like Mailbox
Pulsating heart
Z-level shadows
Filter list
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!