Адаптивный дизайн: как подключить кнопку к картинке?

Как подключить кнопку к определенному месту на изображении в адаптивном дизайне. Как кнопку прикрепить «Вход» в определенном месте? Когда я изменить размер места изменения кнопки окнаАдаптивный дизайн: как подключить кнопку к картинке?

<head> 
    <link href="style/bootstrap.css" rel="stylesheet"> 
<link href="style/style.css" rel="stylesheet"> 
</head> 
<body> 
    <div class="first-block" > 
    <div style="width:100%;"> 
    <div class="navbar navbar-static-top" > 
     <div class="container"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle" data-  toggle="collapse" data-target="#responsive-menu"> 
        <span class="sr-only">Меню</span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button>   
      </div> 
      <div class="collapse navbar-collapse" id="responsive- menu"> 
       <div class="nav navbar-nav"> 
        <li><a href="#">1</a></li> 
        <li><a href="#">2</a></li> 
        <li><a href="#">3</a></li> 
        <li><a href="#">4</a></li> 
       </div> 
      </div> 
     </div> 
     </div> 
    <div class="button-parent" > 
    <button class="button registration1 col-xs-2 col-sm-2 col-md-2 col-lg-2"> 
    <a href="" style="font: 18px white;">Зарегистрироваться</a> 
    </button> 
    </div> 

    </div> 
     </div> 
<div class="second-block"> 
    <div style="width:100%"> 
    <div class="button-parent"> 
    <button class="button registration2 col-xs-2 col-sm-2 col-md-2 col-lg-2"> 
    <a href="" >Sign IN</a> 
    </button> 
    </div> 
    <img src="https://s32.postimg.org/nwl1muvv9/2_3.jpg" class="img-responsive" > 
    </div> 
</div> 

<div class="third-block"> 
    <img src="https://s32.postimg.org/lnyflujyd/image.jpg" class="img-responsive" > 
</div>

html, body { 
    width: 100%; 
    height: 100%; 
} 
.first-block { 
    background: url(https://s32.postimg.org/heab1dm7p/image.jpg) center no-repeat; 
    background-size: cover; 
    width: 100%; 
    height: 100%; 


} 

.button{ 
    height: 5%; 
    border-radius: 20px; 
     background-color:#19A4EC; 
    position: absolute; 
} 
.registration1{ 

    left:42%; 
    top: 70%; 

} 
.button-parent{ 
    margin: 0 auto; 
} 

.registration2{ 
    height: 7%; 
    left:25%; 
    top: 303%; 

}

Ссылка на jsfiddle https://jsfiddle.net/6x63knkm/2/

источник

2016-07-01 Руслан Вергунов

вы можете попробовать для ввода в тег «href» ссылки на страницу, которую вы хотите связать с кнопкой

<button class="button registration2 col-xs-2 col-sm-2 col-md-2 col-lg-2"> 
<a href="https://www.youtube.com/" >Sign IN</a> 
</button>

источник

2016-07-01 11:03:27 Thoruk

И как это поможет? –

Возможно, я не понимал, что вам нужно – Thoruk

Я имею в виду, что когда я меняю размер окна. Место изменения кнопки. –

Адаптивный дизайн: как подключить кнопку к картинке?

ответ

Смежные вопросы