แทรกปุ่มธรรมดา จาก Google site
Embedded Files
<!DOCTYPE html>
<html>
<head>
<style>
.myButton {
box-shadow: 1px 7px 24px -7px #276873;
background:linear-gradient(to bottom, #599bb3 5%, #408c99 100%);
background-color:#599bb3;
border-radius:21px;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:23px;
font-weight:bold;
padding:19px 43px;
text-decoration:none;
text-shadow:0px 0px 0px #3d768a;
}
.myButton:hover {
background:linear-gradient(to bottom, #408c99 5%, #599bb3 100%);
background-color:#408c99;
}
.myButton:active {
position:relative;
top:1px;
}
</style>
</head>
<body>
<a href="https://www.youtube.com/channel/UCMVdjDFb18uSAjkX855avBg" class="myButton">narin anongchai</a>
</body>
</html>
ไปแต่งและเอาโค้ดปุ่ม มาจาก เว็บนี้ https://www.bestcssbuttongenerator.com/
แทรกปุ่มสวยๆ มี Animation ใน Google Site สไตล์ ครูอุสมาน แบบที่ 2
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
height: 20vh;
display: flex;
align-items: right;
justify-content: left;
background-color: ##0a707f;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav ul li {
background-color: white;
--c: goldenrod;
color: var(--c);
font-size: 16px;
border: 0.3em solid var(--c);
border-radius: 0.5em;
width: 12em;
height: 3em;
text-transform: uppercase;
font-weight: bold;
font-family: sans-serif;
letter-spacing: 0.1em;
text-align: center;
line-height: 3em;
position: relative;
overflow: hidden;
z-index: 1;
transition: 0.5s;
margin: 1em;
}
nav ul li span {
position: absolute;
width: 25%;
height: 100%;
background-color: var(--c);
transform: translateY(150%);
border-radius: 50%;
left: calc((var(--n) - 1) * 25%);
transition: 0.5s;
transition-delay: calc((var(--n) - 1) * 0.1s);
z-index: -1;
}
nav ul li:hover {
color: white;
}
nav ul li:hover span {
transform: translateY(0) scale(2);
}
nav ul li span:nth-child(1) {
--n: 1;
}
nav ul li span:nth-child(2) {
--n: 2;
}
nav ul li span:nth-child(3) {
--n: 3;
}
nav ul li span:nth-child(4) {
--n: 4;
}
</style>
</head>
<body>
<a href="https://www.facebook.com/krunarinanongchai" target="_blank" style="text-decoration:none;">
<nav>
<ul>
<li>
เยี่ยมชมครูนรินทร์
<span></span><span></span><span></span><span></span>
</li>
</ul>
</nav></a>
</body>
</html>
Page updated
Google Sites
Report abuse