Float icon right on full width button-CodePudding

So I'm probably too stupid to see the fix and it's probably an easy one, but I'm not super experienced.

I have a full width button with text and an icon on a darker background color. I want the text to be always centered and I want the icon and darker background color to always float on the right side.

How do I achieve this?

https://codepen.io/MrBlack99/pen/QWxVjxY

HTML:

<button type="button" >
  <span >Vergelijk 8 Prijzen</span>
  <span >
    <ion-icon name="chevron-forward-outline"></ion-icon>
  </span>
</button>
<script src="https://unpkg.com/[email protected]/dist/ionicons.js"></script>

CSS:

.button {
  display: flex;
  height: 50px;
  padding: 0;
  background: #1e3c72;
  border: none;
  outline: none;
  border-radius: 5px;
  overflow: hidden;
  font-family: "Quicksand", sans-serif;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  width: 100%;
}

.button:hover {
  background: #234583;
}

.button:active {
  background: #234583;
}

.button__text,
.button__icon {
  display: inline-flex;
  align-items: center;
  padding: 0 24px;
  color: #fff;
  height: 100%;
  float: right;
}

.button__icon {
  font-size: 1.5em;
  background: rgba(0, 0, 0, 0.08);
  float: right;
}

CodePudding user response：

The button has display: flex, float won't work for the flex items like the icon. But you can simply add margin-left: auto; to .button__icon, which will move it as far right as possible inside the flex parent.

.button {
  display: flex;
  height: 50px;
  padding: 0;
  background: #1e3c72;
  border: none;
  outline: none;
  border-radius: 5px;
  overflow: hidden;
  font-family: "Quicksand", sans-serif;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  width: 100%;
}

.button:hover {
  background: #234583;
}

.button:active {
  background: #234583;
}

.button__text,
.button__icon {
  display: inline-flex;
  align-items: center;
  padding: 0 24px;
  color: #fff;
  height: 100%;
  float: right;
}

.button__icon {
  font-size: 1.5em;
  background: rgba(0, 0, 0, 0.08);
  margin-left: auto;
}

<button type="button" >
  <span >Vergelijk 8 Prijzen</span>
  <span >
    <ion-icon name="chevron-forward-outline"></ion-icon>
  </span>
</button>
<script src="https://unpkg.com/[email protected]/dist/ionicons.js"></script>