Form with an input group

Add Student

HTML

<form id="student_form">
    <div class="input-group">
      <input type="text" class="input-group-field" placeholder="Enter student name">
      <div class="input-group-button">
        <button type="submit" class="success button expanded">Add Student</button>
      </div>
   </div>
  </form>

CSS

#student_form > div {
  padding: 0;
}

List item with hover effects

• Name Goes Here

HTML

<ul class="no-bullet">
  <h4>List item with hover effects</h4>
  <li class="student clearfix">
    <span class="student-name editable">Name Goes Here</span>
    <span class="actions expanded button-group">
      <a href="#" class="edit button"><i class="fa fa-pencil"></i></a>
      <a href="#" class="promote warning button"><i class="fa fa-star"></i></a>
      <a href="#" class="move-up button"><i class="fa fa-arrow-up"></i></a>
      <a href="#" class="move-down button"><i class="fa fa-arrow-down"></i></a>
      <a href="#" class="remove alert button"><i class="fa fa-trash-o"></i></a>
    </span>
  </li>
</ul>

CSS

.actions {
  float: right;
  transition: 0.3s;
  opacity: 0;
  margin-bottom: 0;
}

.student {
  border: 1px solid #ddd;
  height: 4rem;
  padding: .75rem 1.25rem;
  margin-bottom: -1px;
  transition: 0.15s;
}
.student:first-child a.move-up,
.student:last-child a.move-down {
  background-color: #ddd;
  color: #eee;
  cursor: not-allowed;
}

.student:hover .actions {
  opacity: 1;
}

List item with inline form with input group

HTML

<ul class="no-bullet">
<h4>List item with inline form with input group</h4>
<li class="student clearfix">
  <form class="edit-form">
    <div class="input-group">
      <input type="text" name="studentName" class="input-group-field" placeholder="Name Goes Here">
      <div class="input-group-button">
        <button type="submit" class="success button"><i class="fa fa-check"></i></button
        ><button type="button" class="alert cancel button"><i class="fa fa-times"></i></button>
      </div>
    </div>
  </form>
</li>
</ul>

CSS

.student .input-group {
  margin-bottom: 0;
}

span.student-name {
  line-height: 40px;
  padding: 1px 1px 1px 9px;
}

.student input[name=studentName] {
  line-height: inherit;
  padding: 0 0 0 8px;
}