Button

Size
3,170 Kb
Views
18,216

How do I make an button?

Ain't nothin' but a button.. What is a button? How do you make a button? This script and codes were developed by Joseph Martucci on 25 October 2022, Tuesday.

Button Previews

Button - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Button</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <button>Button</button>
</body>
</html>

Button - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Roboto:900);
html, body { height: 100%; background-size: cover; background-position: center; position: relative; z-index: 0;
}
body { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; overflow: hidden;
}
button { border: 0; background: rgba(255, 255, 255, 0.7); padding: 20px 40px; position: relative; width: 140px; height: 60px; border-radius: 4px; font-family: 'Roboto', sans-serif; font-weight: 900; text-transform: uppercase; color: rgba(10, 51, 92, 0.5);
}
button:after { border-radius: 4px; pointer-events: none; -webkit-transition: height .3s ease-in, top .3s ease-in, width .3s ease-in .2s, left .3s ease-in .2s, background 1s ease-in-out, -webkit-transform 1s ease-in-out; transition: height .3s ease-in, top .3s ease-in, width .3s ease-in .2s, left .3s ease-in .2s, background 1s ease-in-out, -webkit-transform 1s ease-in-out; transition: height .3s ease-in, top .3s ease-in, width .3s ease-in .2s, left .3s ease-in .2s, background 1s ease-in-out, transform 1s ease-in-out; transition: height .3s ease-in, top .3s ease-in, width .3s ease-in .2s, left .3s ease-in .2s, background 1s ease-in-out, transform 1s ease-in-out, -webkit-transform 1s ease-in-out; mix-blend-mode: multiply; content: ""; position: absolute; top: -10px; left: -10px; width: calc(100% + 20px); height: calc(100% + 20px); background: -webkit-linear-gradient(45deg, rgba(26, 128, 230, 0.5), rgba(129, 20, 184, 0.5)); background: linear-gradient(45deg, rgba(26, 128, 230, 0.5), rgba(129, 20, 184, 0.5)); z-index: -1;
}
button:before { -webkit-transition: -webkit-transform .6s ease-in, -webkit-filter .6s ease-in-out; transition: -webkit-transform .6s ease-in, -webkit-filter .6s ease-in-out; transition: transform .6s ease-in, filter .6s ease-in-out; transition: transform .6s ease-in, filter .6s ease-in-out, -webkit-transform .6s ease-in, -webkit-filter .6s ease-in-out; pointer-events: none; content: ""; background-image: url(https://images.unsplash.com/photo-1429734160945-4f85244d6a5a?dpr=2&fit=crop&fm=jpg&h=700&q=80&w=1050); background-size: cover; position: absolute; top: calc(-50vh + 30px); left: calc(-50vw + 70px); width: 100vw; height: 100vh; z-index: -2;
}
button:hover:after { width: 100vw; height: 100vh; top: calc(-50vh + 30px); left: calc(-50vw + 70px); mix-blend-mode: color-burn;
}
button:hover:before { -webkit-transform: scale(1.2); transform: scale(1.2);
}
button:active { color: rgba(0, 0, 0, 0.6); background: rgba(26, 128, 230, 0.5);
}
button:active:after { background: rgba(46, 66, 107, 0.6);
}
button:active:before { -webkit-filter: grayscale(100%) contrast(140%); filter: grayscale(100%) contrast(140%);
}
Button - Script Codes
Button - Script Codes
Home Page Home
Developer Joseph Martucci
Username jjmartucci
Uploaded October 25, 2022
Rating 4
Size 3,170 Kb
Views 18,216
Do you need developer help for Button?

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!

Joseph Martucci (jjmartucci) Script Codes
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!