Newer
Older
web / web / #btn.css#
@InoueRyoya InoueRyoya on 30 Nov 2021 1 KB gazo

.btn{
 text-align:center;
 margin:0 auto;
}

.btn-circle-border-simple1 {
  display: inline-block;
  text-decoration: none;
  color: #9933FF;
  width: 100px;
  height: 100px;
  line-height: 100px;
  border-radius: 50%;
  border: solid 2px #9933FF;
  text-align: center;
  overflow: hidden;
  font-weight: bold;
  transition: .4s;
}

.btn-circle-border-simple1:hover {
  background: #CC99FF;
}

.btn-circle-border-simple2 {
  display: inline-block;
  text-decoration: none;
  color: #003366;
  width: 100px;
  height: 100px;
  line-height: 100px;
  border-radius: 50%;
  border: solid 2px #003366;
  text-align: center;
  overflow: hidden;
  font-weight: bold;
  transition: .4s;
}

.btn-circle-border-simple2:hover {
  background:#3399FF ;
}

.btn-circle-border-simple3 {
  display: inline-block;
  text-decoration: none;
  color:#00CC00 ;
  width: 100px;
  height: 100px;
  line-height: 100px;
  border-radius: 50%;
  border: solid 2px #00CC00;
  text-align: center;
  overflow: hidden;
  font-weight: bold;
  transition: .4s;
}

.btn-circle-border-simple3:hover {
  background: #66FF66;
}