แทรกปุ่มธรรมดา จาก Google site

<!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>