コピペOK！cssでボックス、アンダーライン、ボタンのデザインサンプル

<box000001><p>黒いボックス</p></box000001>

/*黒いボックス */
box000001{
	border:solid 4px;
	display: inline-block;
	padding: 10px;
	font-size:18px;
	font-weight:bold;
	margin:0.5rem 0 0.5rem;
}

<box000002><p>黒いボックスに黄色い影</p></box000002>

/*黒いボックスに黄色い影 */
box000002 {
  display: inline-block;
  position: relative;
  font-size:18px;
  font-weight:bolder;
  padding: 8px 20px 18px 5px;
  margin:0.9rem 0rem 0.5rem;
  background: #fff100;
}
box000002:before {
  position: absolute;
  top: -7px;
  left: -7px;
  width: 100%;
  height: 100%;
  content: '';
  border: 4px solid #000;
}

<box000003><p>ボックス下部が斜線</p></box000003>

/*ボックス下部が斜線 */
box000003 {
  font-weight:bold;
  margin:1rem 0 1.5rem;
  width: 100%;
  display: inline-block;
  position: relative;
  padding: 1rem 1rem 1.3rem ;
  border: 2px solid #000;
}
box000003:after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 10px;
  content: '';
  border-top: 2px solid #000;
  background-image: -webkit-repeating-linear-gradient(135deg, #000, #000 1px, transparent 2px, transparent 5px);
  background-image: repeating-linear-gradient(-45deg, #000, #000 1px, transparent 2px, transparent 5px);
  background-size: 7px 7px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

<box000004><span>破線ボックス</span></box000004>

/* 破線枠 */
box000004 {
  display: inline-block;
  margin:1rem 0 1.5rem;
  font-weight:bold;
  padding: 1rem 2rem;
  border: 3px dashed #000;
}

<line000001><p>斜線アンダーライン</p></line000001>

/*斜線アンダーライン */
line000001 {
  font-weight:bold;
  margin:1.5rem 0 1.5rem;
  width: 100%;
  display: inline-block;
  position: relative;
  padding: 1rem 0.5rem;
}
line000001:after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 10px;
  content: '';
  background-image: -webkit-repeating-linear-gradient(135deg, #000, #000 1px, transparent 2px, transparent 5px);
  background-image: repeating-linear-gradient(-45deg, #000, #000 1px, transparent 2px, transparent 5px);
  background-size: 7px 7px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

<line000002><p>蛍光ペン風アンダーライン</p></line000002>

/*蛍光ペン風アンダーライン*/
line000002{
  font-weight:bold;
  margin:1.5rem 0 1.5rem;
  width:100%;
  display: inline-block;
  position: relative;
  background: linear-gradient(transparent 50%, #7bf7bd 50%);
}

<a class="button0001" href="#">YSUKE.jp</a>

/* ふわっと黒くなるボタン */
.button0001  {
  display: inline-block;
	margin:0.5rem 0 1.5rem;
  width: 200px;
  height: 54px;
	font-size: 16px;
	font-weight: bold;
	font-style:italic;
  text-align: center;
  text-decoration: none;
  line-height: 54px;
  outline: none;
}
.button0001::before,
.button0001::after {
  position: absolute;
  z-index: -1;
  display: block;
  content: '';
}
.button0001,
.button0001::before,
.button0001::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  transition: all .3s;
}
.button0001 {
  position: relative;
  z-index: 2;
  background-color: #fff;
  border: 2px solid #333;
  color: #333;
  line-height: 50px;
  overflow: hidden;
}
.button0001:hover {
  color: #fff;
}
.button0001::after {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: scale(.5);
  transform: scale(.5);
}
.button0001:hover::after {
  background: #333;
  -webkit-transform: scale(1);
  transform: scale(1);
}

<div class="button0003">
  <a href="">YSUKE.jp</a>
</div>

/* 背景色と枠がズレたボタン */
.button0003 a {
	text-decoration:none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  margin: 0 auto;
  padding: 1em 2em;
  width: 200px;
  color: #333;
  font-size: 16px;
  font-weight: 700;
  background-color: #ccc;
  transition: 0.3s;
}
.button0003 a::before {
  content: '';
  position: absolute;
  top: -5px;
  left: -5px;
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  border: 2px solid #3facc1;
  transition: 0.2s;
}
.button0003 a::after {
  content: '';
  width: 5px;
  height: 5px;
  border-top: 3px solid #333333;
  border-right: 3px solid #333333;
  transform: rotate(45deg);
}
.button0003 a:hover::before {
  top: 0;
  left: 0;
}
.button0003 a:hover {
  text-decoration: none;
  background-color: #47f7a5;
}

<a href="#" rel="noopener noreferrer" target="_blank" class="button0002">YSUKE.jp</a>

/* supスクエアボタン */
.button0002{
	font-family:'Montserrat', Arial, sans-serif;
  font-weight: bold;
	margin:0.5rem 0 1.5rem;
  position: relative;
  display: inline-block;
	 font-style: italic;
   padding: 0.25em 0.5em 0.2em;
   text-decoration: none;
	  border: solid 3px #fc3c3c;
    background: #fc3c3c;
	  color: #fff;
    transition: .3s;
  }
.button0002:hover {
	  border: solid 3px #fc3c3c;
    background: #fff;
    color: #fc3c3c;
}

<a href="#"><span class="line00003">YSUKE.jp</span></a>

/*ホバーすると左から右へ色が変わる*/
.line00003 {
  color:#000;
	font-weight:bold;
	font-style:italic;
	display:inline-block;
	margin-bottom:1em;
	padding:.1em .3em;
  background-image: linear-gradient(to right, rgba(0,0,0,0) 50%, rgba(252, 60, 60, 1) 50%);
  background-size: 200% auto;
  transition: .3s;
}
.line00003:hover {
  background-position: -100% 0;
  color: #fff;
}