0

I want to implement page that looks like this picture

It has next button that must in absolute position in the middle of the page, and next to it there is skip button that the text must center with next button's text. I am struggling to make this happen using flexbox, maybe someone can help me. so far my code is like this

component:

  <View style={{ alignSelf: 'center', position: 'absolute' }}>
    <Button
      buttonStyle={styles.nextButton}
      onPress={this._onPress}
      activeOpacity={0.9}
    >
      <Text style={styles.nextText}>NEXT</Text>
    </Button>
    <Text
      style={styles.skipButton}
      onPress={this._onSkipPress}
    >
      SKIP
    </Text>
  </View>

styles:

  nextButton: {
    backgroundColor: 'white',
    height: 52,
    width: 128,
    borderRadius: 26,
    bottom: 24,
    elevation: 1
  },
  skipButton: {
    marginRight: 20,
    fontSize: 14
  },

I know that this is react-native code, but if you can solve it using css, I believe I can convert it to react-native. Note: please use flexbox only

2r83
  • 659
  • 1
  • 11
  • 21

1 Answers1

3

You can create one div element for buttons and use position: absolute on it and also on last button.

.page {
  height: 100vh;
  background: #4AA1CC;
  position: relative;
}
.buttons {
  position: absolute;
  left: 50%;
  bottom: 50px;
  transform: translateX(-50%);
}
button {
  color: white;
  background: none;
  border: none;
}
.buttons button:first-child {
  padding: 15px 30px;
  width: 100px;
  background: #32D6B6;
  border: 1px solid black;
  border-radius: 30px;
}
.buttons button:last-child {
  position: absolute;
  right: -60px;
  top: 50%;
  transform: translateY(-50%);
}
<div class="page">
  <div class="buttons">
    <button>Next</button>
    <button>Skip</button>
  </div>
</div>
Nenad Vracar
  • 118,580
  • 15
  • 151
  • 176