Slide-open Bootstrap 3 buttons

In this example below you will see how to do a Slide-open Bootstrap 3 buttons with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by toddprouty, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright toddprouty ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Slide-open Bootstrap 3 buttons</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="container">
    
    <div class="box--left box">
        <h2>Left-aligned</h2>
        <button class="delete-btn--1 delete-btn btn btn-xs btn-danger">
            <i class="fa fa-trash fa-lg" aria-hidden="true"></i><span class="text">Delete Item</span>
        </button>

        <button class="delete-btn--2 delete-btn btn btn-xs btn-danger">
            <i class="fa fa-trash fa-lg" aria-hidden="true"></i><span class="text">Delete Longer Item</span>
        </button>

        <button class="delete-btn--3 delete-btn btn btn-xs btn-danger">
            <i class="fa fa-trash fa-lg" aria-hidden="true"></i><span class="text">Delete A Significantly Longer Item</span>
        </button>
    </div>
    
    <div class="box--centered box">
        <h2>Centered</h2>
        
        <button class="delete-btn--1 delete-btn btn btn-xs btn-danger">
            <i class="fa fa-trash fa-lg" aria-hidden="true"></i><span class="text">Delete Item</span>
        </button>

        <button class="delete-btn--2 delete-btn btn btn-xs btn-danger">
            <i class="fa fa-trash fa-lg" aria-hidden="true"></i><span class="text">Delete Longer Item</span>
        </button>

        <button class="delete-btn--3 delete-btn btn btn-xs btn-danger">
            <i class="fa fa-trash fa-lg" aria-hidden="true"></i><span class="text">Delete A Significantly Longer Item</span>
        </button>
    </div>

    <div class="box--right box">
        <h2>Right-aligned</h2>
        
        <button class="delete-btn--1 delete-btn btn btn-xs btn-danger">
            <i class="fa fa-trash fa-lg" aria-hidden="true"></i><span class="text">Delete Item</span>
        </button>

        <button class="delete-btn--2 delete-btn btn btn-xs btn-danger">
            <i class="fa fa-trash fa-lg" aria-hidden="true"></i><span class="text">Delete Longer Item</span>
        </button>

        <button class="delete-btn--3 delete-btn btn btn-xs btn-danger">
            <i class="fa fa-trash fa-lg" aria-hidden="true"></i><span class="text">Delete A Significantly Longer Item</span>
        </button>
    </div>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/toddprouty/slide-open-bootstrap-3-buttons-LeNJJM */
.delete-btn {
  color: #666;
  background-color: #fff;
  border-color: #999;
  margin: 0.75em 0;
}
.delete-btn .text {
  padding-left: 6px;
}

.delete-btn {
  font-size: 11px;
  overflow: hidden;
  transition: max-width ease-out 0.2s, background-color .2s, border-color .2s;
  max-width: 2.1818181818em;
  /* Width of expanded button divided by font-size of button, both in px */
}
.delete-btn--1:hover {
  max-width: 7.78em;
}
.delete-btn--2:hover {
  max-width: 11.1872727273em;
}
.delete-btn--3:hover {
  max-width: 17.7981818182em;
}

/* Demo-specific styles */
body {
  padding: 20px;
}

h2 {
  font-size: 18px;
  font-family: Avenir-Light, sans-serif;
}

.container {
  display: flex;
  justify-content: space-around;
}

.box {
  display: flex;
  width: 20em;
  flex-direction: column;
}
.box--left {
  align-items: flex-start;
}
.box--centered {
  align-items: center;
}
.box--right {
  align-items: flex-end;
}

Comments