Hvordan oprette: kanterknapper

Hvordan designe kanterknapper style

1. trin - Tilføj HTML:

<button class="btn success">Succes</button>
<button class="btn info">Info</button>
<button class="btn warning">Advarsel</button>
<button class="btn danger">Farlig</button>
<button class="btn default">Standard</button>

2. trin - Tilføj CSS:

.btn {
  kanter: 2px solid sort;
  baggrundsfarve: hvid;
  farve: sort;
  margning: 14px 28px;
  skriftstørrelse: 16px;
  markør: pegefinger;
}
/* Grøn */
.success {
  border-farve: #04AA6D;
  farve: grøn;
}
.success:hover {
  baggrundsfarve: #04AA6D;
  farve: hvid;
}
/* Blå */
.info {
  border-farve: #2196F3;
  farve: dodgerblå
}
.info:hover {
  background: #2196F3;
  farve: hvid;
}
/* Orange */
.warning {
  border-farve: #ff9800;
  farve: orange;
}
.warning:hover {
  background: #ff9800;
  farve: hvid;
}
/* Rød */
.danger {
  border-farve: #f44336;
  farve: rød
}
.danger:hover {
  background: #f44336;
  farve: hvid;
}
/* Grå */
.default {
  border-farve: #e7e7e7;
  farve: sort;
}
.default:hover {
  background: #e7e7e7;
}

亲自试一试

tilføj border-radius Egenskaber til at oprette runde kanter knapper:

.btn {
  border-radius: 5px;
}

亲自试一试

相关页面

教程：CSS 按钮