Halo semuanya pada artikel alafgani.web.id kali ini kita akan mempelajari bagaimana cara membuat Tombol Modern HTML Dan CSS?. Langsung saja ini dia beberapa kumpulan 5 Contoh Coding Tombol Modern HTML dan CSS.
Button Metal
HTML : index.html
<link rel="stylesheet" href="styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Metal+Mania&display=swap" rel="stylesheet">
<title>Metal Buttons</title>
</head>
<body>
<h1>Metal Buttons</h1>
<p> Some metal buttons</p>
<div class="holder">
<div><button class="mybtn gold">Gold</button></div>
<div><button class="mybtn silver">Silver</button></div>
<div><button class="mybtn bronze">Bronze</button></div>
<div><button class="mybtn copper">Copper</button></div>
<div><button class="mybtn cobalt">Cobalt</button></div>
<div><button class="mybtn steel">Steel</button></div>
<div><button class="mybtn titanium">Titanium</button></div>
<div><button class="mybtn tin">Tin</button></div>
<div><button class="mybtn nickel">Nickel</button></div>
<div><button class="mybtn brass">Brass</button></div>
<div><button class="mybtn iron">Iron</button></div>
<div><button class="mybtn aluminium">Aluminium</button></div>
</div>
</body>
</html>
CSS : style.css
*, *::before, *::after{
box-sizing: border-box;
}body {
background-color: slategrey;
font-family: 'Metal Mania', cursive;
}
h1{
position: relative;
text-align: center;
font-size: 50px;
}
h1 {
position: relative;
text-align: center;
padding: 30px;
color: #353535;
font-size: 50px;
font-family: "Cormorant Garamond", serif;
}
h1:before{
position: absolute;
content: "";
left: 30%;
bottom: -10px;
width: 40%;
height: 2px;
background-color: #98d9e1;
background-image: linear-gradient(315deg, #fea 0%, #a95 74%);
}
p{
text-align: center;
font-size: 25px;
padding: 30px;
}
.holder{
display: flex;
flex-wrap: wrap;
background-color: #e7eff9;
background-image: linear-gradient(315deg, #e7eff9 0%, #cfd6e6 74%);
width: 90%;
margin: 40px auto;
text-align: center;
}
.mybtn{
margin: 40px;
width: 130px;
height: 40px;
padding: 10px 25px;
color: #fff;
text-shadow: 0px -1px 0px rgba(0,0,0,0.4);
text-decoration: none;
position: relative;
display: inline-block;
cursor: pointer;
background: transparent;
border:2px solid #353535;
border-radius: 5px;
box-shadow: inset 0px 1px 0px rgba(255,255,255,1),0px 1px 3px rgba(0,0,0,0.3);
outline: none;
}
.mybtn:active{
-webkit-transform: translateY(2px);
transform: translateY(2px);
}
/* Gold*/
.gold{
backface-visibility: hidden;
white-space: nowrap;
background: linear-gradient(180deg,#fea 0%,#dc8 49%,#a95 51%,#dc8 100%);
}
/*silver*/
.silver{
backface-visibility: hidden;
white-space: nowrap;
border-color: #7c7c7c;
background: linear-gradient(145deg,#e6e6e6 0%,rgba(0, 0, 0, 0.25) 49%, rgba(38, 38, 38, 0.6) 51%,rgba(0, 0, 0, 0.25) 100%);
}
/*bronze*/
.bronze{
backface-visibility: hidden;
white-space: nowrap;
border-color: #CD7F32;
background: linear-gradient(90deg,#edaa68 5%, #CD7F32 90% )
}
/*copper*/
.copper{
backface-visibility: hidden;
white-space: nowrap;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #B87333), color-stop(100%, #A96424));
border-color: #353535;
}
/*cobalt*/
.cobalt{
backface-visibility: hidden;
white-space: nowrap;
background-image: linear-gradient(
150deg,
hsl(215deg 73% 62%) 0%,hsl(217deg 60% 50%) 14%,hsl(216deg 84% 38%) 25%,
hsl(220deg 50% 55%) 34%, hsl(216deg 50% 77%) 43%,hsl(216deg 50% 77%) 52%,
hsl(220deg 50% 55%) 61%,hsl(214deg 100% 30%) 71%,hsl(211deg 100% 16%) 84%,
hsl(216deg 100% 2%) 100%);
border-color: #0047AB;
}
/*steel*/
.steel{
backface-visibility: hidden;
white-space: nowrap;
background-image: radial-gradient(circle, #bbc6c9, #c5d0d3, #ced9dc, #d8e3e6, #e2edf0);
border-color:#bbc6c9;
}
/*titainium*/
.titanium{
backface-visibility: hidden;
white-space: nowrap;
background-color: #7A7772;
border: 1px solid rgb(133, 134, 134);
box-shadow: 5px 2px 2px rgb(122, 128, 142);
}
/*tin*/
.tin{
backface-visibility: hidden;
white-space: nowrap;
background: repeating-linear-gradient(45deg, #919191, #919191 5px, #ccc 5px, #ccc 10px);
border: #919191 ;
font-weight: 900;
}
/*nickel*/
.nickel{
backface-visibility: hidden;
white-space: nowrap;
background-image: linear-gradient(
90deg,
hsl(120deg 1% 45%) 0%,
hsl(39deg 1% 64%) 26%,
hsl(10deg 2% 79%) 39%,
hsl(0deg 7% 92%) 50%,
hsl(10deg 2% 79%) 61%,
hsl(39deg 1% 64%) 74%,
hsl(120deg 1% 45%) 100%
);
}
/*brass*/
.brass{
backface-visibility: hidden;
white-space: nowrap;
background-image: linear-gradient(
160deg,
hsl(52deg 47% 48%) 1%,
hsl(52deg 47% 48%) 44%,
hsl(52deg 47% 48%) 50%,
hsl(48deg 30% 75%) 51%,
hsl(0deg 7% 92%) 50%,
hsl(48deg 30% 75%) 49%,
hsl(52deg 47% 48%) 50%,
hsl(52deg 47% 48%) 56%,
hsl(52deg 47% 48%) 99%
);
}
/*iron*/
.iron{
backface-visibility: hidden;
white-space: nowrap;
background-image: linear-gradient(
90deg,
hsl(0deg 0% 80%) 0%,
hsl(48deg 3% 70%) 13%,
hsl(42deg 6% 61%) 25%,
hsl(42deg 6% 61%) 37%,
hsl(42deg 6% 61%) 50%,
hsl(42deg 6% 61%) 63%,
hsl(42deg 6% 61%) 75%,
hsl(45deg 3% 74%) 87%,
hsl(0deg 0% 88%) 100%
);
}
/*aluminium*/
.aluminium{
backface-visibility: hidden;
white-space: nowrap;
background-image: linear-gradient(
125deg,
hsl(0deg 4% 79%) 1%,
hsl(0deg 4% 79%) 40%,
hsl(0deg 4% 79%) 47%,
hsl(12deg 4% 48%) 49%,
hsl(30deg 5% 16%) 50%,
hsl(12deg 4% 48%) 51%,
hsl(0deg 4% 79%) 53%,
hsl(0deg 4% 79%) 60%,
hsl(0deg 4% 79%) 100%
);
}
Button Animated
HTML : Index.html
<div class="container"> <a href="#"> <div class="first-button"> <p> first-button </p> </div> </a> <a href="#"> <div class="second-button"> <p> second-button </p> </div> </a> <a href="#"> <div class="third-button"> <p> third-button </p> </div> </a> <a href="#"> <div class="fourth-button"> <p> fourth-button </p> </div> </a> <a href="#"> <div class="fiveth-button"> <p> fiveth-button </p> </div> </a> </div>
CSS: style.css
* {
margin: 0;
padding: 0;
}
body {
background-color: antiquewhite;
}
.container {
margin: auto;
margin-top: 300px;
width: 80%;
height: 100%;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
justify-content: center;
align-items: center;
}
@media (max-width: 1000px) {
.container {
margin-top:60px;
transform: translateX(40px);
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto;
width: 70%;
}
.container {
height: 700px;
}
}
p {
line-height: 50px;
text-decoration: none;
font-family: sans-serif;
font-weight: 600;
text-align: center;
color: black;
}
a {
display: block;
text-decoration: none;
}
/********************FIRST BUTTON*********************/
.first-button {
width: 175px;
height: 50px;
background-color: rgb(234, 203, 166);
border: 2px black solid;
position: relative;
z-index: 1;
}
.first-button::before {
content: "";
display: block;
width: 0;
height: 100%;
background-color: whitesmoke;
position: absolute;
top: 0;
left: 0;
transition: 0.4s ease-in;
z-index: -1;
}
.first-button:hover::before {
width: 100%;
}
/********************SECOND BUTTON*********************/
.second-button {
width: 175px;
height: 50px;
background-color: rgb(234, 203, 166);
border: 2px black solid;
position: relative;
overflow: hidden;
}
.second-button::before {
content: "";
display: block;
width: 0;
height: 100%;
background-color: whitesmoke;
position: absolute;
top: 0;
left: 0;
transition: 0.4s ease-in;
transform: translateY(44px);
}
.second-button:hover::before {
width: 100%;
}
/********************THRID BUTTON*********************/
.third-button {
width: 175px;
height: 50px;
background-color: rgb(234, 203, 166);
border: 2px black solid;
position: relative;
overflow: hidden;
}
.third-button::before {
content: "";
display: block;
width: 50%;
height: 100px;
background-color: whitesmoke;
transition: 0.4s ease-in;
transform: rotate(45deg) translateX(-175px);
position: absolute;
top: 0;
left: 0;
}
.third-button::after {
content: "";
display: block;
width: 50%;
height: 100px;
background-color: whitesmoke;
transition: 0.4s ease-in;
transform: rotate(45deg) translateX(100px) translateY(-50px);
position: absolute;
top: 0;
right: 0;
}
.third-button:hover::before {
transform: rotate(45deg) translateX(-75px);
}
.third-button:hover::after {
transform: rotate(45deg) translateX(39px) translateY(-30px);
}
/********************FOURTH BUTTON*********************/
.fourth-button {
width: 175px;
height: 50px;
background-color: rgb(234, 203, 166);
border: 2px black solid;
position: relative;
overflow: hidden;
z-index: 1;
}
.fourth-button::before {
content: "";
display: block;
width: 100%;
height: 0%;
background-color: whitesmoke;
transition: 0.4s;
position: absolute;
top: 50%;
z-index: -1;
opacity: 0.5;
}
.fourth-button:hover::before {
height: 100%;
transform: translateY(-50%);
opacity: 1;
}
/********************FIVETH BUTTON*********************/
.fiveth-button {
width: 175px;
height: 50px;
background-color: rgb(234, 203, 166);
border: 2px black solid;
position: relative;
overflow: hidden;
z-index: 1;
}
.fiveth-button::before {
content: "";
display: block;
background-color: whitesmoke;
height: 100%;
width: 0;
position: absolute;
top: 0;
right: 0;
transition: 0.4s ease-in;
z-index: -1;
}
.fiveth-button:hover::before {
left: 0;
width: 100%;
}
Cool Button Click To Send
HTML: index.html
<svg viewBox="0 0 1400 1080" fill="none" xmlns="http://www.w3.org/2000/svg"> <path id="paperPlaneRoute" d="M563.558,526.618 C638.854,410.19 787.84,243.065 916.53,334.949 1041.712,424.328 858.791,877.927 743.926,856.655 642.241,838.669 699.637,688.664 700,540" stroke="white" stroke-width="3" style="stroke-dashoffset: 0.001px; stroke-dasharray: 0px, 999999px;"/> <g id="rectSent" clip-path="url(#clipPath)"> <g id="rectSentItems"> <rect id="sentBase" x="460" y="468.5" width="480" height="143" rx="23" fill="white"/> <text id="txtSent" fill="#4F67ED" xml:space="preserve" style="white-space: pre" font-family="Roboto" font-size="82" font-weight="bold" letter-spacing="0.025em"><tspan x="637.487" y="568.027">Sent!</tspan></text> </g> </g> <g id="base"> <g filter="url(#flShadow)"><rect id="btnBase" x="418.117" y="460.55" width="563.765" height="158.899" rx="27" fill="#F1F3FF" /></g> <text id="txtSend" fill="#291D89" xml:space="preserve" style="white-space: pre" font-family="Roboto" font-size="82" font-weight="bold" letter-spacing="0.06em"><tspan x="679.379" y="568.027">Send</tspan></text> <g id="paperPlane" style="transform-origin: 0px 0px 0px;" data-svg-origin="563.55859375 527.734375" transform="matrix(0.8396,0.5432,-0.5432,0.8396,377.09924,-222.6639)"> <path id="paperPlanePath" d="M560.611 481.384C562.003 479.263 565.113 479.263 566.505 481.384L607.063 543.177C615.657 556.272 607.507 573.375 592.766 575.676L566.422 557.462V510.018C566.422 508.436 565.14 507.154 563.558 507.154C561.976 507.154 560.693 508.436 560.693 510.018V557.462L534.349 575.676C519.609 573.375 511.459 556.272 520.053 543.177L560.611 481.384Z" fill="#4F67EB"/> </g> </g> <circle id="cBottom" cx="700" cy="540" r="97.516" fill="#C23F3F" class="hidden"/> <circle id="cTop" cx="700" cy="502.365" r="107.898" fill="#C23F3F" class="hidden"/> <circle id="cCenter" cx="700" cy="540" r="123" fill="#A74C4C" class="hidden" /> <circle id="cEnd" cx="495" cy="540" r="98" fill="#F1F3FF" class="hidden"/> <path id="tickMark" fill-rule="evenodd" clip-rule="evenodd" d="M597.3 489.026C595.179 487.257 592.026 487.541 590.257 489.662L550.954 536.768L534.647 522.965C532.539 521.181 529.384 521.444 527.6 523.551L519.096 533.598C517.312 535.706 517.575 538.861 519.682 540.645L538.606 556.662C538.893 557.162 539.272 557.621 539.74 558.012L549.847 566.445C551.967 568.214 555.12 567.929 556.889 565.809L608.042 504.501C609.811 502.38 609.527 499.227 607.406 497.458L597.3 489.026Z" fill="#4E67E8" class="hidden"/> <defs> <clipPath id="clipPath"> <rect id="mask1" x="700" y="450" width="520" height="180" fill="white" id="clipRect"/> </clipPath> <filter id="flShadow" x="0" y="0" width="1000" height="1000" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"> <feFlood flood-opacity="0" result="BackgroundImageFix"/> <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/> <feOffset dx="4" dy="4"/> <feGaussianBlur stdDeviation="3.5"/> <feColorMatrix type="matrix" values="0 0 0 0 0.5125 0 0 0 0 0.420677 0 0 0 0 0.420677 0 0 0 0.25 0"/> <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/> <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/> </filter> </defs> </svg>
CSS: style.css
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap");
body {
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-family: "Roboto", sans-serif;
font-weight: bold;
background-color: #291d89;
}
svg {
width: 100%;
height: 100vh;
}
.hidden {
visibility: hidden;
}
#base {
cursor: pointer;
}Javascript: js.js
gsap.registerPlugin(MotionPathPlugin);
MorphSVGPlugin.convertToPath("circle, rect");
gsap.set("#paperPlaneRoute", { drawSVG: "0% 0%" });
gsap.set("#rectSentItems", { x: "-=240" });
const tl = gsap.timeline();
let ranOnce = false;
function onBtnUp() {
if (ranOnce) {
tl.restart();
return;
}
ranOnce = true;
tl.to("#base", { duration: 0.2, scale: 1, transformOrigin: "50% 50%" });
tl.to(
"#btnBase",
{ duration: 0.77, morphSVG: "#cBottom", ease: "power1.inOut" },
"start"
);
tl.to("#btnBase", { duration: 0.23, morphSVG: "#cTop", ease: "power1.inOut" });
tl.to("#btnBase", {
duration: 0.2,
morphSVG: "#cCenter",
ease: "power1.inOut"
});
tl.to(
"#btnBase",
{ duration: 0.5, morphSVG: "#cEnd", ease: "power1.inOut" },
"revealStart"
);
tl.to("#rectSentItems", { x: "0", duration: 0.5 }, "revealStart");
tl.to(
"#mask1",
{ x: "-=260", duration: 0.5, ease: "power1.inOut" },
"revealStart"
);
tl.to(
"#paperPlane",
{ x: "-=205", duration: 0.5, ease: "power1.inOut" },
"revealStart"
);
tl.to(
"#paperPlanePath",
{ duration: 0.43, morphSVG: "#tickMark" },
"start+=0.77"
);
tl.to(
"#txtSend",
{ duration: 0.6, scale: 0, transformOrigin: "50% 50%" },
"start"
);
tl.to(
"#paperPlaneRoute",
{ drawSVG: "80% 100%", duration: 0.7, ease: "power1.inOut" },
"start+=0.3"
);
tl.to(
"#paperPlaneRoute",
{ drawSVG: "100% 100%", duration: 0.2, ease: "power1.inOut" },
"start+=1"
);
tl.to(
"#paperPlane",
{
duration: 1,
ease: "power1.inOut",
immediateRender: true,
motionPath: {
path: "#paperPlaneRoute",
align: "#paperPlaneRoute",
alignOrigin: [0.5, 0.5],
autoRotate: 90
}
},
"start"
);
tl.to(
"#paperPlanePath",
{ duration: 0.15, attr: { fill: "#ffffff" } },
"start"
);
tl.to(
"#paperPlanePath",
{ duration: 0.15, attr: { fill: "#4E67E8" } },
"start+=0.77"
);
}
function onBtnDown() {
gsap.timeline({ defaults: { clearProps: true } });
gsap.to("#base", { duration: 0.1, scale: 0.9, transformOrigin: "50% 50%" });
}
const btn = document.getElementById("base");
btn.addEventListener("mousedown", onBtnDown);
btn.addEventListener("mouseup", onBtnUp);
Kunjungi Selengkapnya: Click to send Button
Cool Button Generator
HTML:index.html
<div class="project"> <div class="credits"> <h1>Made By Diabolical</h1> </div> <div class="everything-container"> <div class="outer-container"> <div class="container"> <div class="section"> <h3 style="text-align: center;">Click the buttons to copy HTML & CSS</h3> <div class="button-container"> <button> <p>Button</p> </button> <button> <p>Button</p> </button> <button> <p>Button</p> </button> <button> <p>Button</p> </button> </div> <div class="button-container"> <button> <p>Button</p> </button> <button> <p>Button</p> </button> <button> <p>Button</p> </button> <button> <p>Button</p> </button> </div> <div class="button-container"> <button> <p>Button</p> </button> <button> <p>Button</p> </button> <button> <p>Button</p> </button> <button> <p>Button</p> </button> </div> <div class="button-container"> <button> <p>Button</p> </button> <button> <p>Button</p> </button> <button> <p>Button</p> </button> <button> <p>Button</p> </button> </div> </div> </div> </div> <div class="panel"> <div class="title"> <h3>Input Button Text</h3> </div> <input type="text" id="input-text" placeholder="button_name"> <button id="random-button-text" style="background-color: #2196f3; border-radius: 4px;">Randomize</button> <div class="title"> <h3>Randomize Button Styles</h3> </div> <button id="random-style-button" style="background-color: #2196f3; border-radius: 4px;">Randomize</button> <div style="display: flex; width: 100%; flex-direction: column; margin-top: 20px;"> <div style="display: flex; align-items: center; justify-content: space-between; width: 100%;"> <p>Icon Side</p> <label class="toggle-switch"> <input type="checkbox" id="toggle-icon-side" /> <span class="slider"></span> </label> </div> <div style="display: flex; width: 100%; align-items: center; justify-content: space-around; background-color: #2196f3; border-radius: 8px;" id="icon-side-options"> <button style="border-radius: 8px; padding: 8px 16px;" id="left-option">Left</button> <button style="border-radius: 8px; padding: 8px 16px;" id="right-option">Right</button> </div> <div style="display: flex; align-items: center; justify-content: space-between; width: 100%;"> <p>Round Button</p> <label class="toggle-switch"> <input type="checkbox" id="toggle-round-button" /> <span class="slider"></span> </label> </div> <div style="display: flex; justify-content: space-around; width: 100%; gap: 8px;" id="corner-inputs"> <input type="text" style="width: inherit;" id="left-top-input"> <input type="text" style="width: inherit;" id="right-top-input"> <input type="text" style="width: inherit;" id="right-bottom-input"> <input type="text" style="width: inherit;" id="left-bottom-input"> </div> </div> </div>
CSS:Style.css
@import url("https://fonts.googleapis.com/css2?family=Bungee&family=Inconsolata:wght@300&display=swap");
/* Animations */
@-webkit-keyframes bg-scrolling-reverse {
100% {
background-position: 50px 50px;
}
}
@-moz-keyframes bg-scrolling-reverse {
100% {
background-position: 50px 50px;
}
}
@-o-keyframes bg-scrolling-reverse {
100% {
background-position: 50px 50px;
}
}
@keyframes bg-scrolling-reverse {
100% {
background-position: 50px 50px;
}
}
@-webkit-keyframes bg-scrolling {
0% {
background-position: 50px 50px;
}
}
@-moz-keyframes bg-scrolling {
0% {
background-position: 50px 50px;
}
}
@-o-keyframes bg-scrolling {
0% {
background-position: 50px 50px;
}
}
@keyframes bg-scrolling {
0% {
background-position: 50px 50px;
}
}
body {
font-family: "Poppins", sans-serif;
background-color: #212121;
color: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
height: 100svh;
margin: 0;
padding: 20px;
box-sizing: border-box;
transition: all 0.3s ease-in-out;
/* img size is 50x50 */
background: url("https://cdn.discordapp.com/attachments/1124065927718252584/1124065995762442250/indir.png") repeat 0 0;
-webkit-animation: bg-scrolling-reverse 0.92s infinite;
/* Safari 4+ */
-moz-animation: bg-scrolling-reverse 0.92s infinite;
/* Fx 5+ */
-o-animation: bg-scrolling-reverse 0.92s infinite;
/* Opera 12+ */
animation: bg-scrolling-reverse 0.92s infinite;
/* IE 10+ */
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-o-animation-timing-function: linear;
animation-timing-function: linear;
}
h1 {
font-family: "Bungee";
font-weight: 100;
text-align: left;
line-height: 120%;
margin: 0;
}
h3 {
text-align: center;
margin-bottom: 10px;
}
.everything-container {
display: flex;
gap: 20px;
}
.panel {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
border-radius: 20px;
overflow: hidden;
width: 20vw;
height: 90vh;
box-sizing: border-box;
padding: 20px;
border-style: solid;
border-width: 2px;
border-color: #444444;
background-color: #212121;
}
.panel input[type="text"] {
display: inline-flex;
padding: 10px;
background-color: #363636;
border-radius: 4px;
border: none;
font-family: "Bungee";
color: var(--text-white, #fff);
margin-bottom: 10px;
width: -webkit-fill-available;
}
.panel button {
display: inline-flex;
padding: 20px 52px;
justify-content: center;
align-items: center;
border: none;
gap: 6px;
font-family: "Bungee";
line-height: 100%;
cursor: pointer;
width: -webkit-fill-available;
}
.outer-container {
border-radius: 20px;
overflow: hidden;
width: 60vw;
height: 90vh;
box-sizing: border-box;
border-style: solid;
border-width: 2px;
border-color: #444444;
}
.container {
text-align: center;
width: 100%;
height: 100%;
background-color: #212121;
overflow-y: auto;
overflow-x: hidden;
min-width: fit-content;
display: flex;
gap: 20px;
flex-direction: column;
}
/* This will change the width of the scrollbar */
.container::-webkit-scrollbar {
width: 6px;
}
/* This will change the color and roundness of the scrollbar "thumb" (the part you click and drag) */
.container::-webkit-scrollbar-thumb {
background-color: #161616;
border-radius: 20px;
}
.section {
display: flex;
flex-direction: column;
gap: 10px;
margin: auto;
}
.project {
display: flex;
position: relative;
/* New style */
}
.credits {
display: flex;
position: absolute;
/* New style */
top: 0;
/* New style */
left: 0;
/* New style */
height: 100%;
/* New style */
align-items: center;
/* New style */
justify-content: center;
/* New style */
}
.credits h1 {
text-align: center;
transform: rotate(-90deg);
/* Change from rotate to transform: rotate */
margin-right: 50px;
white-space: nowrap;
position: absolute;
/* Prevent the text from breaking into multiple lines */
}
.title {
width: 100%;
height: fit-content;
}
.title h2 {
text-align: center;
margin-bottom: 0;
}
.button-container {
display: flex;
gap: 10px;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}
.copy-notification {
font-family: "Bungee", sans-serif;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(0, 0, 0, 0.8);
color: #fff;
padding: 10px 20px;
border-radius: 4px;
opacity: 0;
animation: fade-in-out 3s ease-in-out;
}
@keyframes fade-in-out {
0%,
100% {
opacity: 0;
}
10%,
90% {
opacity: 1;
}
}
button {
display: inline-flex;
padding: 20px 40px;
justify-content: center;
align-items: center;
background-color: #ffffff00;
border: none;
gap: 6px;
font-family: "Bungee";
cursor: pointer;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
button:hover {
transform: scale(1.05);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
button p {
font-family: 'Bungee';
color: var(--text-white, #fff);
/* Caption - Heavy */
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 16px;
margin: 0;
}
/* This will change the width of the scrollbar */
.panel::-webkit-scrollbar {
width: 6px;
}
/* This will change the color and roundness of the scrollbar "thumb" (the part you click and drag) */
.panel::-webkit-scrollbar-thumb {
background-color: #161616;
border-radius: 20px;
}
.donut-icon {
width: 4px;
height: 4px;
border: 3px solid white;
border-radius: 50%;
background: transparent;
position: relative;
}
/* Add hover animations to the toggle switch */
.toggle-switch:hover {
cursor: pointer;
}
.toggle-switch:hover .slider {
background-color: #3e3e3e;
}
/* Add hover animations to the panel buttons */
.panel button:hover {
background-color: #1976d2;
}
.panel button:hover p {
color: #fff;
}
.toggle-switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.toggle-switch input {
display: none;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: 0.4s;
border-radius: 34px;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
transition: 0.4s;
border-radius: 50%;
}
input:checked+.slider {
background-color: #2196f3;
}
input:checked+.slider:before {
transform: translateX(26px);
}
@media only screen and (max-width: 1000px) {
.everything-container{
flex-direction: column;
}
.panel{
width: 100%;
height: 40svh;
overflow: auto;
}
.outer-container{
width: 100%;
height: 50svh;
}
.credits{
display: none;
}
.section{
padding: 40px;
}
}Javascript:js.js
var cornerInputs = document.getElementById("corner-inputs");
var leftTopInput = document.getElementById("left-top-input");
var rightTopInput = document.getElementById("right-top-input");
var rightBottomInput = document.getElementById("right-bottom-input");
var leftBottomInput = document.getElementById("left-bottom-input");
var inputText = document.getElementById("input-text");
var randomizeButton = document.getElementById("random-button-text");
var randomStyleButton = document.getElementById("random-style-button");
var buttons = document.querySelectorAll(
"button:not(#random-button-text):not(#random-style-button)"
);
var iconSideToggle = document.getElementById("toggle-icon-side");
var roundButtonToggle = document.getElementById("toggle-round-button");
var iconSideToggle = document.getElementById("toggle-icon-side");
var iconSideOptions = document.getElementById("icon-side-options");
var leftOptionButton = document.getElementById("left-option");
var rightOptionButton = document.getElementById("right-option");
window.addEventListener("load", function () {
toggleButtonsVisibility();
updateIconPositions();
});
iconSideToggle.addEventListener("change", function () {
toggleButtonsVisibility();
updateIconPositions();
});
leftOptionButton.addEventListener("click", function () {
updateIconPositions("before");
});
rightOptionButton.addEventListener("click", function () {
updateIconPositions("after");
});
leftTopInput.addEventListener("input", function () {
updateButtonStyles();
});
rightTopInput.addEventListener("input", function () {
updateButtonStyles();
});
rightBottomInput.addEventListener("input", function () {
updateButtonStyles();
});
leftBottomInput.addEventListener("input", function () {
updateButtonStyles();
});
buttons.forEach((button) => {
button.addEventListener("click", function () {
copyButtonStyles(button);
});
});
function toggleButtonsVisibility() {
if (iconSideToggle.checked) {
iconSideOptions.style.display = "flex";
} else {
iconSideOptions.style.display = "none";
}
}
function updateIconPositions(position) {
var buttons = document.querySelectorAll(
".button-container button:not(.exclude-random)"
);
buttons.forEach((button) => {
var donutIcon = button.querySelector(".donut-icon");
if (iconSideToggle.checked) {
if (!donutIcon) {
donutIcon = document.createElement("div");
donutIcon.classList.add("donut-icon");
button.insertBefore(donutIcon, button.firstChild);
}
donutIcon.style.display = "block";
if (position === "before") {
button.insertBefore(donutIcon, button.querySelector("p"));
} else {
button.appendChild(donutIcon);
}
} else {
if (donutIcon) {
donutIcon.style.display = "none";
}
}
});
}
function updateButtonStyles() {
var leftTopValue = leftTopInput.value || "0";
var rightTopValue = rightTopInput.value || "0";
var rightBottomValue = rightBottomInput.value || "0";
var leftBottomValue = leftBottomInput.value || "0";
buttons.forEach((button) => {
if (roundButtonToggle.checked) {
button.style.borderRadius = `${leftTopValue}px ${rightTopValue}px ${rightBottomValue}px ${leftBottomValue}px`;
} else {
button.style.borderRadius = "4px";
}
});
if (roundButtonToggle.checked) {
cornerInputs.style.display = "flex";
} else {
cornerInputs.style.display = "none";
}
}
function showCopyNotification() {
// Create a notification element
const notification = document.createElement("div");
notification.textContent = "Button HTML and CSS styles have been copied!";
notification.classList.add("copy-notification");
// Find the section element
const section = document.querySelector(".section");
// Append the notification to the section
section.appendChild(notification);
// Remove the notification after 3 seconds
setTimeout(() => {
section.removeChild(notification);
}, 3000);
}
function copyButtonStyles(button) {
// Exclude panel buttons from copying styles
if (button.closest(".panel")) {
return;
}
// Create a new textarea element
const textarea = document.createElement("textarea");
// Get the button's HTML content
const buttonHTML = button.outerHTML.trim();
// Get the button's existing inline style
const buttonInlineStyle = button.getAttribute("style") || "";
// Create the combined styles for the button, button text, and donut icon
const buttonStyles = `
@import url("https://fonts.googleapis.com/css2?family=Bungee&family=Inconsolata:wght@300&display=swap");
button {
display: inline-flex;
padding: 20px 40px;
justify-content: center;
align-items: center;
background-color: #ffffff00;
border: none;
gap: 6px;
font-family: "Bungee";
cursor: pointer;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
button:hover {
transform: scale(1.05);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
button p {
font-family: 'Bungee';
color: var(--text-white, #fff);
/* Caption - Heavy */
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 16px;
margin: 0;
}
.donut-icon {
width: 4px;
height: 4px;
border: 3px solid white;
border-radius: 50%;
background: transparent;
position: relative;
}
`;
// Set the value of the textarea to the combined button HTML and CSS styles
textarea.value = `${buttonHTML}\n\n<style>\n${buttonStyles}\n</style>`;
// Append the textarea to the body
document.body.appendChild(textarea);
// Select the contents of the textarea
textarea.select();
// Copy the selected content to the clipboard
document.execCommand("copy");
// Remove the textarea from the body
document.body.removeChild(textarea);
// Show the copy notification
showCopyNotification();
}
function getRandomColor() {
var r1 = Math.floor(Math.random() * 256);
var g1 = Math.floor(Math.random() * 256);
var b1 = Math.floor(Math.random() * 256);
var r2 = Math.floor(Math.random() * 256);
var g2 = Math.floor(Math.random() * 256);
var b2 = Math.floor(Math.random() * 256);
return {
c1: { r: r1, g: g1, b: b1, rgb: "rgb(" + r1 + "," + g1 + "," + b1 + ")" },
c2: { r: r2, g: g2, b: b2, rgb: "rgb(" + r2 + "," + g2 + "," + b2 + ")" }
};
}
function getRandomBorderStyle() {
var styles = [
"none",
"dotted",
"dashed",
"solid",
"double",
"groove",
"ridge",
"inset",
"outset"
];
var index = Math.floor(Math.random() * styles.length);
return styles[index];
}
function getRandomAngle() {
var angles = [
"to right",
"to bottom",
"to left",
"to top",
"to bottom right",
"to bottom left",
"to top left",
"to top right"
];
var index = Math.floor(Math.random() * angles.length);
return angles[index];
}
function getContrast(rgb) {
// Calculating the perceptive luminance - human eye favors green color
var luminance = (0.299 * rgb.r + 0.587 * rgb.g + 0.114 * rgb.b) / 255;
return luminance > 0.5 ? "black" : "white";
}
function applyRandomStyles() {
var buttons = document.querySelectorAll(
".button-container button:not(#random-button-text):not(#random-style-button)"
);
buttons.forEach((button) => {
var colors = getRandomColor();
var color1 = colors.c1;
var color2 = colors.c2;
var textColor = getContrast(color1);
var donutIcon = button.querySelector(".donut-icon");
if (iconSideToggle.checked) {
if (!donutIcon) {
donutIcon = document.createElement("div");
donutIcon.classList.add("donut-icon");
button.insertBefore(donutIcon, button.firstChild);
}
donutIcon.style.stroke = textColor;
} else {
if (donutIcon) {
donutIcon.remove();
}
}
var pTag = button.querySelector("p");
if (pTag) {
pTag.style.color = textColor;
}
button.style.backgroundImage = `linear-gradient(${getRandomAngle()}, ${
color1.rgb
}, ${color2.rgb})`;
button.style.borderColor = Math.random() > 0.1 ? color1.rgb : "transparent"; // 10% chance of no border
button.style.borderStyle = getRandomBorderStyle();
if (roundButtonToggle.checked) {
button.style.borderRadius = `${leftTopInput.value}px ${rightTopInput.value}px ${rightBottomInput.value}px ${leftBottomInput.value}px`;
} else {
button.style.borderRadius = "0px";
}
});
if (roundButtonToggle.checked) {
cornerInputs.style.display = "flex";
} else {
cornerInputs.style.display = "none";
}
}
inputText.addEventListener("input", function () {
buttons.forEach((button) => {
var pTag = button.querySelector("p");
if (pTag) {
pTag.innerText = inputText.value;
}
});
});
randomizeButton.addEventListener("click", function () {
var randomText = Math.random().toString(36).substring(7);
buttons.forEach((button) => {
var pTag = button.querySelector("p");
if (pTag) {
pTag.innerText = randomText;
}
});
inputText.value = randomText;
});
randomStyleButton.addEventListener("click", function () {
applyRandomStyles();
});
// Handle toggle switch events
iconSideToggle.addEventListener("change", function () {
updateIconPositions();
});
roundButtonToggle.addEventListener("change", function () {
updateButtonStyles();
});
// Initialize with random styles on page load
window.addEventListener("load", function () {
applyRandomStyles();
});Kunjungi selengkapnya : Cool Button Generator
Ripple Effect Button
HTML:index.html
<div class="container">
<a href="#">
<div class="first-button">
<p>
first-button
</p>
</div>
</a>
<a href="#">
<div class="second-button">
<p>
second-button
</p>
</div>
</a>
<a href="#">
<div class="thrid-button">
<p>
thrid-button
</p>
</div>
</a>
<a href="#">
<div class="fourth-button">
<p>
fourth-button
</p>
</div>
</a>
<a href="#">
<div class="fiveth-button">
<p>
fiveth-button
</p>
</div>
</a>
</div>CSS:style.css
body {
background-color: #17181C;
display:flex;
align-items:center;
}
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
column-gap: 40px;
width: 50%;
height: 300px;
margin: auto;
margin-top:13.5%;
justify-content: center;
align-items: center;
}
a {
width: 220px;
height: 50px;
display: inline-block;
text-decoration: none;
}
p {
text-align: center;
font-family: sans-serif;
font-weight: 600;
}
@media (300px <= width <=640px) {
.container {
margin-top: 20px;
margin-left: 25%;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto;
justify-content: center;
align-items: center;
}
.container {
height: 700px;
}
}
/***********FISRT BUTTON*************/
.first-button {
width: 200px;
height: 50px;
transition: all 0.2s ease-in;
border: 3px rgb(77, 141, 193) solid;
color: rgb(77, 141, 193);
}
.first-button:hover {
transform: translateY(-5px);
box-shadow: 0 5px 25px -5px rgb(77, 141, 193);
border: 3px rgb(106, 188, 255) solid;
color: rgb(103, 187, 255);
}
/***********SECOND BUTTON*************/
.second-button {
width: 200px;
height: 50px;
transition: all 0.2s ease-in;
border: 3px rgb(149, 77, 216) solid;
color: rgb(149, 77, 216);
position: relative;
overflow: hidden;
}
.second-button::before {
content: "";
display: block;
position: absolute;
top: 0;
right: 0;
width: 300px;
height: 300px;
border-radius: 100%;
z-index: -1;
background-color: rgb(149, 77, 216);
transform: translateY(-200px) translateX(-500px);
transition: all 0.4s ease-in;
}
.second-button:hover::before {
transform: translateX(-140px) translateY(-230px);
background-color: rgb(149, 77, 216);
box-shadow: 0px 5px 25px -5px rgb(171, 99, 239);
}
.second-button:hover {
color: rgb(184, 120, 243);
border: 3px rgb(171, 99, 239) solid;
box-shadow: 0px 5px 25px -5px rgb(171, 99, 239);
}
/***********THRID BUTTON*************/
.thrid-button {
width: 200px;
height: 50px;
border: 3px rgba(14, 192, 106, 0.636) solid;
position: relative;
color: rgba(14, 192, 106, 0.664);
}
.thrid-button::before {
width: 214px;
height: 64px;
content: "";
display: block;
position: absolute;
top: -10px;
right: -10px;
}
.thrid-button:hover::before {
border: 3px rgb(14, 192, 106) solid;
box-shadow: 0px 5px 25px 1px rgb(14, 192, 106);
color: rgb(14, 192, 106);
transform: scale(1);
}
.thrid-button:hover {
color: rgb(14, 192, 106);
border: 3px rgb(14, 192, 106) solid;
}
/***********FOURTH BUTTON*************/
.fourth-button {
width: 200px;
height: 50px;
border: 3px rgba(255, 0, 0, 0.487) solid;
position: relative;
color: rgba(255, 0, 0, 0.487);
}
.fourth-button:before {
content: "";
display: block;
width: 0px;
height: 0px;
position: absolute;
top: -10px;
left: -10px;
border-left: 3px rgba(255, 0, 0, 0.487) solid;
border-top: 3px rgba(255, 0, 0, 0.487) solid;
transition: all 0.3s ease-in;
}
.fourth-button:after {
content: "";
display: block;
width: 0px;
height: 0px;
position: absolute;
bottom: -10px;
right: -10px;
border-right: 3px rgba(255, 0, 0, 0.487) solid;
border-bottom: 3px rgba(255, 0, 0, 0.487) solid;
transition: all 0.2s ease-in;
}
.fourth-button:hover::before {
width: 50px;
height: 50px;
border-left: 3px rgb(255, 0, 0) solid;
border-top: 3px rgb(255, 0, 0) solid;
}
.fourth-button:hover::after {
width: 50px;
height: 50px;
border-right: 3px rgb(255, 0, 0) solid;
border-bottom: 3px rgb(255, 0, 0) solid;
}
.fourth-button:hover {
color: rgb(255, 0, 0);
box-shadow: 0px 5px 25px 1px rgb(255, 0, 0);
border-color: rgb(255, 0, 0);
}
/***********FIVETH BUTTON*************/
.fiveth-button {
width: 200px;
height: 50px;
border: 3px rgba(255, 255, 0, 0.494) solid;
position: relative;
color: rgba(255, 255, 0, 0.494);
}
.fiveth-button::before {
content: "";
display: block;
width: 0;
height: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: all 0.6s ease-in;
}
.fiveth-button:hover:before {
border-left: 3px yellow solid;
border-right: 3px yellow solid;
width: 100%;
box-shadow: 0px 5px 25px 1px yellow;
}
.fiveth-button:hover {
color: yellow;
border: 3px yellow solid;
}
Javascript:JS
document.addEventListener('click', function(event) {
event.preventDefault();
});Kunjungi Selengkapnya:Ripple Effect Animated Button
Penutup
Itulah contoh coding button modern html dan css yang dapat kita pelajari, dengan demikian kamu sudah bisa membuatnya dengan contoh yang sudah diberikan ini. buat kamu yang mau belajar pemrograman dengan ebook gratis Silahkan Download Ebook HTML Gratis Disini. Semoga tutorial ini bermanfaat. terimakasih sudah berkunjung.
Menyukai Kucing, Terkadang ngopi dikala Hujan, Menyukai Blog dan Website. Sekarang berfokus kepada SEO.
