Pretty App Button

by Imri Paloja

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
<div class="container">

  <h1>Purchase Button</h1>

  <p>
    The EuroBytes Purchase button for the <a href="https://eurobytes.eu/" title="Purchase Button" target="_blank">eurobytes.eu</a> website
  </p>

  <!-- WordPress -->

  <div class="pretty-button row" title="Install Wordpress">

    <div class="pretty-button-icon column">
      <img src="https://s.w.org/style/images/about/WordPress-logotype-simplified.png" alt="WordPress" title="WordPress">
    </div>

    <div class="pretty-button-text column">
      <strong>Install WordPress</strong>
    </div>

  </div>

  <!-- Joomla -->

  <div class="pretty-button row" title="Install Joomla">

    <div class="pretty-button-icon column">
      <img src="https://logodownload.org/wp-content/uploads/2018/03/joomla-logo-3.png" alt="Joomla" title="Joomla">
    </div>

    <div class="pretty-button-text column">
      <strong>Install Joomla</strong>
    </div>

  </div>

  <!-- Drupal -->

  <div class="pretty-button row" title="Install Drupal">

    <div class="pretty-button-icon column">
      <img src="https://pluspng.com/img-png/drupal-logo-png-policy-no-patch-revise-the-druplicon-logo-2057767-drupal-org-1071x1243.png" alt="Drupal" title="Drupal">
    </div>

    <div class="pretty-button-text column">
      <strong>Install Drupal</strong>
    </div>

  </div>

</div>

CSS

html,
body {
  color: #454545;
}


.container {
  margin-top: 5%;
}

.pretty-button {
  background: #F9F9F9;
  border: 1px solid #CCCCCC;
  border-radius: 5px;
  padding: 20px 30px;
  margin: 20px 00px;
  width: 100%;
  cursor: pointer;
}

.pretty-button .pretty-button-icon {
  border-right: 1px solid #CCCCCC;
  width: 10%;
}


.pretty-button .pretty-button-icon img {
  width: auto;
  min-width: 25px;
  max-width: 10%;
}

/* Side By Side */

/* Create two equal columns that floats next to each other */
.column {
  float: left;
  width: 50%;
  padding: 10px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 500px) {
  .column {
    width: 100%;
  }
}