コピペでできる”ボタン”のデザインサンプル一覧[HTML/CSS/JavaScript]

2023年9月12日2023年9月13日

ボタンのデザインサンプル一覧

ボタン

正四角形

.t8-button-1{
    height: 100px;
    width: 100px;
    margin:0 auto;
    justify-content: center;
    align-items: center;
    border:3px solid  #0d6efd;
    color: #fff;
    background: transparent;
    font-weight: bold;
    font-size: 1em;
}

長方形

.t8-button-2{
    width: 200px;
    margin:0 auto;
    padding: 1em 0.5em;
    justify-content: center;
    align-items: center;
    border:3px solid  #0d6efd;
    color: #fff;
    background: transparent;
    font-weight: bold;
    font-size: 1em;
}

長方形(単色)

.t8-button-3{
    width: 200px;
    margin:0 auto;
    padding: 1em 0.5em;
    justify-content: center;
    align-items: center;
    background: #0d6efd;
    color: #fff;
    font-weight: bold;
    font-size: 1em;
}

グラデーション(上下)

.t8-button-4{
    width: 200px;
    margin:0 auto;
    padding: 1em 0.5em;
    justify-content: center;
    align-items: center;
    background: -webkit-linear-gradient(to top, transnparent, #0d6efd);
    background: linear-gradient(to top, transparent, #0d6efd);
    color: #fff;
    font-weight: bold;
    font-size: 1em;
    border: none;
}

グラデーション(左右)

.t8-button-5{
    width: 200px;
    margin:0 auto;
    padding: 1em 0.5em;
    justify-content: center;
    align-items: center;
    background: -webkit-linear-gradient(to right, #0d6efd, transparent);
    background: linear-gradient(to right, #0d6efd, transparent);
    color: #fff;
    font-weight: bold;
    font-size: 1em;
    border: none;
}

キャプション

.t8-button-6{
    width: 200px;
    margin:0 auto;
    padding: 1em 0.5em;
    justify-content: center;
    align-items: center;
    background: #0d6efd;
    color: #fff;
    font-weight: bold;
    font-size: 0.5em;
}
.t8-button-6::before {
    display: block;
    font-size: 2em;
    line-height: 1.5;
    content: attr(data-label);
}

楕円形(角丸)

.t8-button-7{
    width: 200px;
    margin:0 auto;
    padding: 1em 0.5em;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    background: #0d6efd;
    color: #fff;
    font-weight: bold;
    font-size: 1em;
}

楕円形(側円)

.t8-button-7a{
    width: 200px;
    margin:0 auto;
    padding: 1em 0.5em;
    justify-content: center;
    align-items: center;
    border-radius: 100px;
    background: #0d6efd;
    color: #fff;
    font-weight: bold;
    font-size: 1em;
}

楕円形(卵型)

.t8-button-8{
    width: 200px;
    margin:0 auto;
    padding: 1em 0.5em;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background: #0d6efd;
    color: #fff;
    font-weight: bold;
    font-size: 1em;
}

半円形

.t8-button-9{
    width: 100px;
    margin:0 auto;
    padding: 1em 0.5em;
    justify-content: center;
    align-items: center;
    border-radius:100px 100px 0 0;
    background: #0d6efd;
    color: #fff;
    font-weight: bold;
    font-size: 1em;
}

正円形

.t8-button-10{ 
    height: 100px;
    width: 100px;
    margin:0 auto;
    padding: 1em 0.5em;
    justify-content: center;
    align-items: center;
    border-radius: 100px;
    background: #0d6efd;
    color: #fff;
    font-weight: bold;
    font-size: 1em;
}

正円形(二重)

.t8-button-11{ 
    height: 100px;
    width: 100px;
    margin:0 auto;
    padding: 1em 0.5em;
    justify-content: center;
    align-items: center;
    border-radius: 100px;
    background: #0d6efd;
    color: #fff;
    font-weight: bold;
    font-size: 1em;
}
.t8-button-11::before {  
  content: "";
  width: 80px;
  height: 80px;
  position: absolute;
  top: 10px;
  left: 10px;
  border: solid #00ffff 5px;
  border-radius: 100%;
  box-sizing: border-box;
}

正三角形

.t8-button-12{ 
    margin:0 auto;
    padding: 1em 0.5em;
    justify-content: center;
    align-items: center;
    background: #0d6efd;
    color: #fff;
    font-weight: bold;
    font-size: 1em;
    height: calc(120px / 2 * tan(60deg));
    width: 120px;
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

帯

.t8-button-13{
    width: 200px;
    margin:0 auto;
    padding: 1em 0.5em;
    justify-content: center;
    align-items: center;
    border-top:3px solid  #0d6efd;
    border-bottom:3px solid  #0d6efd;
    color: #fff;
    background: transparent;
    font-weight: bold;
    font-size: 1em;
    border-left: none;
    border-right: none;
}

括弧

.t8-button-14{
    width: 200px;
    margin:0 auto;
    padding: 1em 0.5em;
    justify-content: center;
    align-items: center;
    color: #fff;
    background: transparent;
    font-weight: bold;
    font-size: 1em;
    position: relative;
    display: inline-block;
    border-top: none;
    border-bottom: none;
}
.t8-button-14:before, .t8-button-14:after {
    display: inline-block;
    position: absolute;
    width: 10px;
    height: 100%;
    border: 5px solid #0d6efd;
 
    content: '';
}
.t8-button-14:before {
    top: 0;
    left: 0;
    border-right: none;
}
.t8-button-14:after {
    bottom: 0;
    right: 0;
    border-left: none;
}

ふせん

.t8-button-15{
    width: 200px;
    margin:0 auto;
    padding: 1em 0.5em;
    justify-content: center;
    align-items: center;
    background: #0d6efd;
    border-left: 30px solid #00ffff;
    color: #fff;
    font-weight: bold;
    font-size: 1em;
}

テープ

.t8-button-16{
    width: 200px;
    margin:0 auto;
    padding: 1em 0.5em;
    justify-content: center;
    align-items: center;
    background: #0d6efd;
    color: #fff;
    border-left: 2px dotted #202020;
    border-right: 2px dotted #202020;
    font-weight: bold;
    font-size: 1em;
}

リボン

.t8-button-17{
    width: 200px;
    margin:0 auto;
    padding: 1em 0.5em;
    justify-content: center;
    align-items: center;
    background: #0d6efd;
    color: #fff;
    font-weight: bold;
    font-size: 1em;
    display: inline-block;
    position: relative;
    border: none;
}
.t8-button-17:before, .t8-button-17:after {
  position: absolute;
  content: '';
  width: 0px;
  height: 0px;
  z-index: 1;
}

.t8-button-17:before {
  top: 0;
  left: 0;
  border-width: 25px 0px 25px 15px;
  border-color: transparent transparent transparent #202020;
  border-style: solid;

}

.t8-button-17:after {
  top: 0;
  right: 0;
  border-width: 25px 15px 25px 0px;
  border-color: transparent #202020 transparent transparent;
  border-style: solid;

}

ステッチ

.t8-button-18{
    width: 200px;
    margin:0 auto;
    padding: 1em 0.5em;
    justify-content: center;
    align-items: center;
    background: #0d6efd;
    border: dashed 3px #202020;
    padding: 0.5em 0.5em;
    color: #fff;
    box-shadow: 0px 0px 0px 5px #0d6efd;
    font-weight: bold;
    font-size: 1em;
}

クーポン

.t8-button-19{
    width: 200px;
    margin:0 auto;
    padding: 1em 0.5em;
    justify-content: center;
    align-items: center;
    background: #0d6efd;
    color: #fff;
    font-weight: bold;
    font-size: 1em;
　　display: inline-block;
　　position: relative;
}
.t8-button-19::after {
  position: absolute;
  content: "";
  height: 40px;
  left: 180px;
  border-radius: 40px;
  z-index: 1;
  top: 11px;
  background-color: #202020;
  width: 40px;
　display: inline-block;
}

.t8-button-19::before {
  position: absolute;
  content: "";
  height: 40px;
  left: -20px;
  border-radius: 40px;
  z-index: 1;
  top: 11px;
  background-color: #202020;
  width: 40px;
}

ストライプ

.t8-button-20{
    width: 200px;
    margin:0 auto;
    padding: 1em 0.5em;
    justify-content: center;
    align-items: center;
    background: repeating-linear-gradient(-45deg, #0d6efd, #0d6efd 2px, transparent 2px, transparent 6px);
    color: #fff;
    font-weight: bold;
    font-size: 1em;
    border: none;
}

ホバー(変色)

<button class="t8-button-21">ボタン</button>

<style>
.t8-button-21{
    width: 200px;
    margin:0 auto;
    padding: 1em 0.5em;
    justify-content: center;
    align-items: center;
    background: #0d6efd;
    color: #fff;
    font-weight: bold;
    font-size: 1em;
}
.t8-button-21:hover {
    background: #00ffff;
}

ホバー(変形)

.t8-button-22{
    width: 200px;
    margin:0 auto;
    padding: 1em 0.5em;
    justify-content: center;
    align-items: center;
    background: #0d6efd;
    color: #fff;
    font-weight: bold;
    font-size: 1em;
}
.t8-button-22:hover {
    border-radius: 50%;
}

ホバー(小さく)

.t8-button-23{
    width: 200px;
    margin:0 auto;
    padding: 1em 0.5em;
    justify-content: center;
    align-items: center;
    background: #0d6efd;
    color: #fff;
    font-weight: bold;
    font-size: 1em;
}
.t8-button-23:hover {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
    cursor: pointer;
}

ホバー(大きく)

.t8-button-24{
    width: 200px;
    margin:0 auto;
    padding: 1em 0.5em;
    justify-content: center;
    align-items: center;
    background: #0d6efd;
    color: #fff;
    font-weight: bold;
    font-size: 1em;
}
.t8-button-24:hover {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    cursor: pointer;
}

ホバー(光る)

.t8-button-25{
    width: 200px;
    margin:0 auto;
    padding: 1em 0.5em;
    justify-content: center;
    align-items: center;
    background: #0d6efd;
    color: #fff;
    font-weight: bold;
    font-size: 1em;
}
.t8-button-25:hover {
    border-color: #00ffff;
    box-shadow: inset 0 0 20px 
    #00ffff, 0 0 20px 
    #00ffff;
    outline-color: transparent;
    outline-offset: 10px;
    text-shadow: 2px 2px 2px #000;
    cursor: pointer;
}

ホバー(広がる)

.t8-button-26{
    width: 200px;
    margin:0 auto;
    padding: 1em 0.5em;
    justify-content: center;
    align-items: center;
    background: #0d6efd;
    color: #fff;
    font-weight: bold;
    font-size: 1em;
}
.t8-button-26:hover { 
    animation: t8-button-26 1s;
}
@keyframes t8-button-26 {
    0% {
    box-shadow: 0 0 0 0 rgb(37 137 208 / 50%);
}
    100% {
    box-shadow: 0 0 0 1.2em rgb(0 0 0 / 0%);
}
}

ホバー(傾く)

.t8-button-27{
    width: 200px;
    margin:0 auto;
    padding: 1em 0.5em;
    justify-content: center;
    align-items: center;
    background: #0d6efd;
    color: #fff;
    font-weight: bold;
    font-size: 1em;
}
.t8-button-27:hover {
    transform: rotate(-10deg);
}

ホバー(反射)

.t8-button-28 {
    position: relative;
    width: 200px;
    margin: 0 auto;
    padding: 1em 2em;
    overflow: hidden;
    border: none;
    background: #0d6efd;;
    color: #fff;
    font-weight: bold;
    font-size: 1em;
}
.t8-button-28:hover::before {
    display: block;
    position: absolute;
    top: -50%;
    left: -30%;
    width: 50px;
    height: 100px;
    content: '';
    transform: rotate(30deg);
    background-image: linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%);
    background-image: -webkit-gradient(linear, left bottom, right bottom, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(50%, rgba(255, 255, 255, 1)), color-stop(100%, rgba(255, 255, 255, 0)));
    animation: t8-button-28 2s infinite linear;
}

@keyframes t8-button-28 {
    20% {
        left: 120%;
    }
    100% {
        left: 120%;
    }
}

ホバー(点滅)

.t8-button-29{
    width: 200px;
    margin:0 auto;
    padding: 1em 0.5em;
    justify-content: center;
    align-items: center;
    background: #0d6efd;
    color: #fff;
    font-weight: bold;
    font-size: 1em;
}
.t8-button-29:hover { 
    animation: t8-button-29 1s linear infinite;
}
@keyframes t8-button-29 {
    0% {
    opacity: 1;
    }

    50% {
    opacity: 0;
    }
  
  
    100% {
    opacity: 1;
    }
}

ホバー(凹む)

.t8-button-30{
    width: 200px;
    margin:0 auto;
    padding: 1em 0.5em;
    justify-content: center;
    align-items: center;
    background: #0d6efd;
    color: #fff;
    font-weight: bold;
    font-size: 1em;
}
.t8-button-30:hover {
    transform: translateY(10px);
    box-shadow: 0 0 0 #202020;
}

ホバー(浮く)

.t8-button-31{
    width: 200px;
    margin:0 auto;
    padding: 1em 0.5em;
    justify-content: center;
    align-items: center;
    background: #0d6efd;
    color: #fff;
    font-weight: bold;
    font-size: 1em;
}
.t8-button-31:hover {
    transform: translateY(-10px);
}

ホバー(上下揺れ)

.t8-button-32{
    width: 200px;
    margin:0 auto;
    padding: 1em 0.5em;
    justify-content: center;
    align-items: center;
    background: #0d6efd;
    color: #fff;
    font-weight: bold;
    font-size: 1em;
}
.t8-button-32:hover {
    animation: t8-button-32 3s infinite;
}
@keyframes t8-button-32 {
    0% {
        transform: translate(0px, 2px);
    }
    5% {
        transform: translate(0px, -2px);
    }
    10% {
        transform: translate(0px, 2px);
    }
    15% {
        transform: translate(0px, -2px);
    }
    20% {
        transform: translate(0px, 2px);
    }
    25% {
        transform: translate(0px, -2px);
    }
    30% {
        transform: translate(0px, 0px);
    }
}

ホバー(左右揺れ)

.t8-button-33{
    width: 200px;
    margin:0 auto;
    padding: 1em 0.5em;
    justify-content: center;
    align-items: center;
    background: #0d6efd;
    color: #fff;
    font-weight: bold;
    font-size: 1em;
}
.t8-button-33:hover {
    animation: t8-button-33 3s infinite;
}
@keyframes t8-button-33 {
    0% {
        transform: translate(2px, 0px);
    }
    5% {
        transform: translate(-2px, 0px);
    }
    10% {
        transform: translate(2px, 0px);
    }
    15% {
        transform: translate(-2px, 0px);
    }
    20% {
        transform: translate(2px, 0px);
    }
    25% {
        transform: translate(-2px, 0px);
    }
    30% {
        transform: translate(0px, 0px);
    }
}

ホバー(鼓動)

.t8-button-34{
    width: 200px;
    margin:0 auto;
    padding: 1em 0.5em;
    justify-content: center;
    align-items: center;
    background: #0d6efd;
    color: #fff;
    font-weight: bold;
    font-size: 1em;
}
.t8-button-34:hover {
    animation: pulsation .5s alternate infinite;
}

@keyframes pulsation {
    0% { transform: scale(1); }
    50% { transform: scale(0.9); }
    100% { transform: scale(1.1); }
}

ホバー(振動)

.t8-button-35{
    width: 200px;
    margin:0 auto;
    padding: 1em 0.5em;
    justify-content: center;
    align-items: center;
    background: #0d6efd;
    color: #fff;
    font-weight: bold;
    font-size: 1em;
}
.t8-button-35:hover {
    display: inline-block;
    animation:t8-button-35 .1s  infinite;
}

@keyframes t8-button-35 {
    0% {transform: translate(0px, 0px) rotateZ(0deg)}
    25% {transform: translate(2px, 2px) rotateZ(1deg)}
    50% {transform: translate(0px, 2px) rotateZ(0deg)}
    75% {transform: translate(2px, 0px) rotateZ(-1deg)}
    100% {transform: translate(0px, 0px) rotateZ(0deg)}

ホバー(上下スライド)

.t8-button-36 {
    width:200px;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    background: #0d6efd;
    padding: 20px 30px; 
    position: relative;
    z-index: 1;
    transition: .5s;
}
.t8-button-36::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    background: #00ffff;
    transform-origin: 50% 0%;
    transform: scaleY(0);
    transition: transform ease .5s;
}
.t8-button-36:hover {
    color: #fff;
}
.t8-button-36:hover::before {
    transform-origin: 50% 100%;
    transform: scaleY(1);
}

ホバー(左右スライド)

.t8-button-37 {
    width:200px;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    background: #0d6efd;
    padding: 20px 30px;
    position: relative;
    z-index: 1;
    transition: .5s;
}
.t8-button-37::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    background: #00ffff;
    transform-origin: 100% 50%;
    transform: scaleX(0);
    transition: transform ease .5s;
}
.t8-button-37:hover {
    color: #fff;
}
.t8-button-37:hover::before {
    transform-origin: 0% 50%;
    transform: scaleX(1);
}

ホバー(文字拡大)

.t8-button-38{
    width: 200px;
    margin:0 auto;
    padding: 1em 0.5em;
    justify-content: center;
    align-items: center;
    background: #0d6efd;
    color: #fff;
    font-weight: bold;
    font-size: 1em;
}
.t8-button-38:hover {
    font-size: 1.5em; 
    padding: 0.35em;
}

ホバー(文字移動)

.t8-button-39{
    width: 200px;
    margin:0 auto;
    padding: 1em 0.5em;
    justify-content: center;
    align-items: center;
    background: #0d6efd;
    color: #fff;
    font-weight: bold;
    font-size: 1em;
}
.t8-button-39:hover {
      letter-spacing: 1em;
      cursor: pointer;
}

ホバー(文字回転)

.t8-button-40{
    width: 200px;
    margin:0 auto;
    padding: 1em 0.5em;
    justify-content: center;
    align-items: center;
    background: #0d6efd;
    color: #fff;
    font-weight: bold;
    font-size: 1em;
}
.t8-button-40 span {
    display:inline-block;
    transition: .5s;
}
.t8-button-40:hover span {
    transform: rotateX(360deg);
}

ホバー(図形回転)

.t8-button-41 {
    width:200px;
    display: inline-block;
    transition: .3s;
    perspective: 1000px;
    perspective-origin: 50% 50%;
    overflow: hidden;
    border: none;
    background: transparent;
}
.t8-button-41 span {
    width:200px;
    color: #fff;
    font-size: 1em;
    font-weight: bold;
    background: #0d6efd;
    padding: 20px 30px;
    display: inline-block;
    position: relative;
    transform-origin: 50% 0%;
    transform-style: preserve-3d;
    transition: .5s;
}
.t8-button-41 span:after {
    width:200px;
    position: absolute;
    left: 0;
    top: 0;
    content: attr(data-text);
    padding: 20px 30px;
    background-color: #00ffff;
    display: inline-block;
    transform-origin: 50% 0%;
    transform: translate3d(0, 100%, 0) rotateX(-90deg);
}
.t8-button-41:hover span {
    transform: translate3d(0, 0, -60px) rotateX(90deg);
}

URLをコピーしました！