<h1>クリエイター川柳</h1>
<form method="" action="" class="senryu">
  <input type="text" name="一句" class="ikku">
  <div class="bg">
  <input type="submit" value="詠む" class="yomu" onsubmit="return yonde();">
  </div>
</form>
h1 {
  text-align: center;
}

form{
  width:300px; 
  margin: 0 auto;
  border: 1px solid #ccc;
  padding: 20px;
}

.ikku {
  height: 2em;
  width: 100%; 
  margin: 0 0 10px;
}

.yomu {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  display: block;
  color: #fff;
  border: none;
  background: #666;
  border-radius: 5px;
  font-size: 14px;
  position: relative;
}

.yomu:hover {
  cursor:pointer;
  opacity: 0.7;
}

.bg{
  position: relative;
  margin: 0 auto;
  width: 50%;
  height: 2em;
}

.bg::after {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-top: 2px solid #ccc;
  border-right: 2px solid #ccc;
  position: absolute;
  top: 10px;
  right: 10px;
  transform:rotate(45deg)
}
const ikku = document.querySelector(".ikku");

const yomu = document.querySelector(".yomu");

function yonde() {
   if(ikku.value === "") {      
    alert('いやん。ちゃんと詠んでね。。');
    return false;
  }
} 

yomu.addEventListener('click', yonde, false);


External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.