CSS button positions stitched on background with responsive behaviour

user_10329836 0
Viewed 85

For some reason i've got a background file like this with 3 buttons merged, now i'd like to have a transparent button that superimpose over the button image and be responsive. I've tryed with % and with hv but i cannot understand how manage this... this is an example of transparent buttons (with red border for debug)

same as before but with different size of the browser window

What i'm trying to achieve is to have the transaprent buttons always in the same position of the circles

/* Homepage */
.home-container{

    width:100hv;
    height: 100%;
}
.home-img{
 width: 100%;
 height: 100%;

}

.ITA-button{
    
    width: 65px;
    height: 65px;
    top: 69.7vh;
    right: 69vw;
    position: absolute;
    transform: translateX(-50%),translateY(-50%);
    background-color: transparent;
    border: transparent;
    cursor: pointer;
}
.ENG-button{
    
    width: 65px;
    height: 65px;
    top: 69.7vh;
    right: 47vw;
    position: absolute;
    transform: translateX(-50%),translateY(-50%);
    background-color: transparent;
    border-style: solid;
    border-color: tomato;
    cursor: pointer;
}
.FRA-button{
    
    width: 65px;
    height: 65px;
    top: 69.7vh;
    right: 25vw;
    position: absolute;
    transform: translateX(-50%),translateY(-50%);
    background-color: transparent;
    border-style: solid;
    border-color: tomato;
    cursor: pointer;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-s">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>IPAD n°2</title>  
    <link rel="stylesheet" href="CSS/style.css">
    <!-- annullo favicon -->
    <link rel="icon" href="data:,">
    
    

    
</head>

<body class="animate-in">
    <div class="home-container">    
    <a class="home-img" href="https://ibb.co/HFjFT3s"><img src="https://i.ibb.co/NVMV2bP/S01-Language-Skyway.png"></a>  
    <button class="ITA-button"></button>  
    <button class="ENG-button">ENG</button> 
    <button class="FRA-button">FRA</button> 
    </div>
    
 
   
</body>


</html>

this is the css that i'm working on, the image is contained in home-img class

frontend css html
1 Answers

Why using an image when you can create the whole thing using HTML/CSS

.box {
  display: flex;
  justify-content: space-around;
  padding-top: 200px;
  background: red;
  font-size: 18px;
  font-family: arial;
}

.box a {
  transform: translateY(60px);
}

.box a::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  width: 40px;
  height: 40px;
  transform: translateX(-50%);
  border-radius: 50%;
  border: 20px solid #fff;
  background: red;
}
<div class="box">
  <a href="">Italiano</a>
  <a href="">English</a>
  <a href="">Français</a>
</div>

Example with an image and transparency:

.box {
  display: flex;
  padding-top: 200px;
  font-size: 18px;
  font-family: arial;
  position:relative;
}
.box::before {
  content:"";
  position:absolute;
  background: url(https://picsum.photos/id/1016/800/800) center/cover;
  top:0;
  left:0;
  right:0;
  bottom:0;
  -webkit-mask:
     radial-gradient(circle at bottom,#fff 20px, transparent 21px 40px,#fff 41px)  top,
     radial-gradient(circle at top   ,#fff 20px, transparent 21px 40px)            bottom;
  -webkit-mask-size:calc(100%/3) calc(100% - 20px),calc(100%/3) 20px;
  -webkit-mask-repeat:repeat-x;
}

.box a {
  transform: translateY(40px);
  flex:1;
  text-align:center;
}

.box a::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  width: 75px;
  height: 75px;
  border:1px solid green; /* to illustrate, you can remove */
  transform: translateX(-50%);
  border-radius: 50%;
}

body {
  background:#f2f2f2;
}
<div class="box">
  <a href="">Italiano</a>
  <a href="">English</a>
  <a href="">Français</a>
</div>

With your hacky code you can try like below:

/* Homepage */

.home-container {
  position: relative;
}

.home-img {
  width: 100%;
  display: block
}

.home-container>button {
  width: 10vw;
  height: 10vw;
  position: absolute;
  bottom: 15%;
  transform: translateX(-50%) translateY(-50%);
  border-style: solid;
  border-color: tomato;
  cursor: pointer;
}

.ITA-button {
  left: 28%;
}

.ENG-button {
  left: 50%;
}

.FRA-button {
  left: 72%;
}
<div class="home-container">
  <img class="home-img" src="https://i.ibb.co/NVMV2bP/S01-Language-Skyway.png">
  <button class="ITA-button">IT</button>
  <button class="ENG-button">ENG</button>
  <button class="FRA-button">FRA</button>
</div>

user_86203330
Related