無垢なきみへ、

●ストライプ別カラーバージョン。これはこれでガーリーな？さわやかな？感じが出てると思います。他の色→
●ソースはほぼ一緒で、配色だけ変えています。
通常リンクとボックスリンク
HEAD
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP|Ultra|ZCOOL+KuaiLe" rel="stylesheet"><link href="https://fonts.googleapis.com/css?family=Sacramento" rel="stylesheet">
<style type="text/css">
@font-face{
font-family:Fontpoにほんご;
src:url('https://cdn.leafscape.be/nihongo/FontopoNIHONGO_web.woff')
format("woff");
}

body{
background-color:#fff;
  color : #708090;
  font-size:12px;
 letter-spacing:2.4px;
 line-height:2;
font-family: 'ZCOOL KuaiLe', Fontpoにほんご,Meiryo,メイリオ, sans-serif;
text-align:center;
}


h1{color: #708090;
font-size: 60px;
font-family: 'Sacramento', cursive;
position : absolute;
  top : 100px;
  left : 270px;
  width : 580px;
  padding : 10px;
 }

h2{color: #708090;
font-size: 40px;
font-family: 'Sacramento', cursive;
position:  absolute;
padding:  10px;
left:  0px;
top: 102px;}

a{
text-decoration:none;
color:#708090;
}
a:hover{
text-decoration:none;
color:#e0ffff;;
}

.cp_link {
	display: inline-block;
	perspective: 1000px;
	perspective-origin: 50% 50%;
	vertical-align: bottom;
	overflow: hidden;
}
.cp_link span {
	display: inline-block;
	position: relative;
	padding: 0.1em 0.3em;
	transition: .4s;
	transform-origin: 50% 0%;
	transform-style: preserve-3d;
}
.cp_link span:after {
	display: inline-block;
	position: absolute;
	padding: 0.1em 0.3em;
	left: 0;
	top: 0;
	content: attr(data-text);
	color: #708090;
	background-color: #e0ffff;
	transform-origin: 50% 0%;
	transform: translate3d(0, 105%, 0) rotateX(-90deg);
}
.cp_link:hover span {
	background-color: #e0ffff;
	transform: translate3d(0, 0, -30px) rotateX(90deg);
}

hr { 
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  background: #bbb;
  background-image: -webkit-linear-gradient(left, #eee, #777, #eee);
  background-image: -moz-linear-gradient(left, #eee, #777, #eee);
  background-image: -ms-linear-gradient(left, #eee, #777, #eee);
  background-image: -o-linear-gradient(left, #eee, #777, #eee);
}


 /* --- ストライプ背景 ------------------------------------- */
.box {
  margin     : auto;
  max-width  : 500px;
  height     : 200px;
                                  /* ストライプパターンのCSS */
  background : repeating-linear-gradient(315deg,
                                         #e0ffff,
                                         #e0ffff 21px,
                                         #ffffff 0,
                                         #ffffff 41px);
}

.box2 {
  margin     : auto;
  max-width  : 300px;
  height     : 10px;
                                  /* ストライプパターンのCSS */
  background : repeating-linear-gradient(315deg,
                                         #ffffff,
                                         #ffffff 21px,
                                         #e0ffff 0,
                                         #e0ffff 41px);
}


.pc { display: block !important; }
.sp { display: none !important; }
@media only screen and (max-width: 750px) {
.pc { display: none !important; }
.sp { display: block !important; }
}

.TextLeft{
    text-align:left;
}

.wrp {
    max-width: 500px;
    margin: 50px auto 10px;
}

textarea{
background:#e0ffff;
color:#222;
width:98%;
padding:1%;
display;block;
height:40px;
font-family:'Expletus Sans',Fontpoにほんご,Meiryo,メイリオ, sans-serif;
border:none;
border-radius:3px;
letter-spacing:1px;
line-height:1.5;
}
</style>
HTML
Stripe girl

girl
