How to create a button in SFML?

The first thing to note, is that you have a ; after an if statement, before the code for the true condition. This means that the if line is useless, and that code for the true condition will always be executed.

Removing that semi-column will be our first step.

The second thing to note is that you don't need all that code for the if condition. SFML offers a contains method on the rectangle which returns true if the vector passed is in the rectangle. This really reduces the code and improves readability and reliability.

The third thing to note is that the window.draw( exitButtonImage ); is useless in that if( isOver ) condition because you'll draw it anyway at the end of the while.

The fourth thing to note is that, with the previous changes, the button will become 'red' only when you actually move the mouse over it. We need a way to preserve the state. This is nice because...

The fifth thing to note is that the code is doing a very bad usage of memory allocation and disk access. The creation of your buttons could be done only once, with the objects reused every frame, instead of being recreated every frame.

We'll take the text and image creation outside of the while ( window.isOpen() ). This will allow us to keep the state of the exitButtonImage from frame to frame. If the mouse moves over the exit button, it will set it to 'red', and if we stop moving the mouse, no more mouse event are received, so the last state stays in place. Nice, our button stays put!

But that causes another bug: the button does not get back to its 'pristine' state when we mouse-out.

To fix that, we simply add an else to the 'mouse move and mouse is over the button' if: exitButtonImage.setColor( sf::Color( 255, 255, 255 ) );. This will put the button in it's original state.

With that, you only need to detect the 'click' event, and you'll have something usable.

Note that this is a bit of a hackish way of doing things as you'll change the colour of the button every frame the mouse moves, whether you actually need to change it or not, which may take up more resources than needed. I think in your situation it's fine to go that way, though; you can ignore this small issue for now.

That's basically what I had to say about your code :)

For your convenience, here is the code I think you wanted to write:

#include <SFML/Graphics.hpp>
#include <SFML/Audio.hpp>
#include <string>
#include <iostream> 

int main()
{
  sf::RenderWindow window( sf::VideoMode( 1024, 622 ), "Survival Game", sf::Style::Default );

  sf::Texture background;
  sf::Sprite backgroundImage;

  if ( !background.loadFromFile( "Alaskan Wilderness.png" ) )
    std::cout << "Error: Could not display Alaskan Wilderness image" << std::endl;

  backgroundImage.setTexture( background );

  sf::Font font;
  if ( !font.loadFromFile( "MATURASC.TTF" ) )
    std::cout << "Can't find the font file" << std::endl;

  sf::Texture exitButton;
  sf::Sprite exitButtonImage;
  if ( !exitButton.loadFromFile( "Exit Button.png" ) )
    std::cout << "Can't find the image" << std::endl;
  exitButtonImage.setPosition( 50.0f, 500.0f );

  float exitButtonWidth = exitButtonImage.getLocalBounds().width;
  float exitButtonHeight = exitButtonImage.getLocalBounds().height;

  exitButtonImage.setTexture( exitButton );

  sf::Text startText;
  startText.setFont( font );
  startText.setStyle( sf::Text::Bold );
  startText.setString( "Create New Game" );
  startText.setFillColor( sf::Color::Black );
  startText.setCharacterSize( 48 );
  startText.setPosition( 50.0f, 320.0f );
  sf::Text loadText;
  loadText.setFont( font );
  loadText.setStyle( sf::Text::Bold );
  loadText.setString( "Load Game" );
  loadText.setFillColor( sf::Color::Black );
  loadText.setCharacterSize( 48 );
  loadText.setPosition( 50.0f, 380.0f );
  sf::Text settingsText;
  settingsText.setFont( font );
  settingsText.setStyle( sf::Text::Bold );
  settingsText.setString( "Settings" );
  settingsText.setFillColor( sf::Color::Black );
  settingsText.setCharacterSize( 48 );
  settingsText.setPosition( 50.0f, 440.0f );

  while ( window.isOpen() )
  {
    sf::Event Event;
    while ( window.pollEvent( Event ) )
    {
      switch ( Event.type )
      {
      case sf::Event::Closed:
        window.close();
        break;
      case sf::Event::MouseMoved:
        {
          sf::Vector2i mousePos = sf::Mouse::getPosition( window );
          sf::Vector2f mousePosF( static_cast<float>( mousePos.x ), static_cast<float>( mousePos.y ) );
          if ( exitButtonImage.getGlobalBounds().contains( mousePosF ) )
          {
            exitButtonImage.setColor( sf::Color( 250, 20, 20 ) );
          }
          else
          {
            exitButtonImage.setColor( sf::Color( 255, 255, 255 ) );
          }
        }
        break;
      case sf::Event::MouseButtonPressed:
        {
          sf::Vector2i mousePos = sf::Mouse::getPosition( window );
          sf::Vector2f mousePosF( static_cast<float>( mousePos.x ), static_cast<float>( mousePos.y ) );
          if ( exitButtonImage.getGlobalBounds().contains( mousePosF ) )
          {
            std::cout << "Clicked, yay!" << std::endl;
          }
        }
        break;
      }
    }

    window.clear();
    window.draw( backgroundImage );
    window.draw( exitButtonImage );
    window.draw( startText );
    window.draw( loadText );
    window.draw( settingsText );
    window.display();
  }
  return 0;
}

This only manages the exit button that you wanted to create, but a lot of programming is generally done by monkey-see-monkey-do, so I assume you'll be able to adapt the code.

I'll end this answer by noting that it might not be the most optimal way of doing what you want, architecturally speaking, but since you're just starting, you'll find ways to improve your software as you see fit.