Question

如何让这个按钮响应？（用手机）我希望看到全宽的按钮，但我不能，我也不知道为什么！

PS：你可以改变你想要的一切，但请帮助我！

PS2：按钮有动画，我知道如何阻止它，所以只使用这段代码。

如果您需要更多相关信息，请询问，我会尽快回答您的问题！抱歉我的英文不好，谢谢你的帮助！

＆＃13;

.bottoni {
  display: block;
  z-index: 999;
  width: 100px;
  height: 100%;
  position: absolute;
  top: 50%; bottom: 0; right: 0;
  transform:translateX(-190%);
  margin-top: -200px;
  text-align: left;

} 

.bottoni > a {
  display: inline-block;
  padding: 10px 40px;
  min-width: 240px;
  margin: 20px;
  background: rgba(0, 0, 0, 0.9);
  border-left: 15px solid #f45341;
  border-right: 3px solid #f45341;
  text-decoration: none;  
  color: #fff;
  text-transform: uppercase;
  font-size: 30px;
  background: linear-gradient(to left, #f45341 50%, rgba(96, 96, 96, 0.4) 50%);
    background-position: 0% 0%;
    background-size: 200%;
    transition: background 150ms ease-in-out, color 150ms ease-in-out;
    transition: .3s;
    font-family: pricedown;
  border-radius: 5px;
  text-align: left;
}

.bottoni > a:hover {
  color: #fff;
    background-position: -100% 0%;
    cursor: pointer;
    border-left: 15px solid #f45341;
}

.bottoni2 {
  display: block;
  z-index: 999;
  width: 100px;
  height: 100%;
  margin: 0;
  position: absolute;
  top: 50%; bottom: 0; left: 0;
  transform:translateX(-100%);
  margin-top: -200px;
  text-align: right;

} 

.bottoni2 > a {
display: inline-block;
  padding: 10px 40px;
  min-width: 240px;
  margin: 20px;
  background: rgba(0, 0, 0, 0.9);
  border-right: 15px solid #f45341;
  border-left: 3px solid #f45341;
  text-decoration: none;  
  color: #fff;
  text-transform: uppercase;
  font-size: 30px;
  background: linear-gradient(to right, rgba(96, 96, 96, 0.4) 50%, #f45341 50%);
    background-position: 0% 0%;
    background-size: 200%;
    transition: background 150ms ease-in-out, color 150ms ease-in-out;
    transition: .3s;
    font-family: pricedown;
  border-radius: 5px;
  text-align: right;
}

.bottoni2 > a:hover {
  color: #fff;
    background-position: -100% 0%;
    cursor: pointer;
    border-right: 15px solid #f45341;
}

@media only screen and (max-width: 768px) {
  .bottoni{
    width: 100%;
    position: relative;
    display: inline-block;
    transform:translate(0%,0%);
    top: 0; bottom: 0; right: 0; left: 0;
  }
}

＆＃13;

<div class="bottoni">
		<a target="blank_" id="store" href="http://store.sparocraft.eu">Store</a>
		<a target="blank_" id="votaci" href="http://vota.sparocraft.eu">Votaci</a>
	</div>

	<div class="bottoni2">
		<a target="blank_" id="ts" class="offline" href="ts3server://ts.sparocraft.eu">TeamSpeak</a>
		<a target="blank_" id="bans" class="offline" onclick="offline();">Bans</a>
	</div>

＆＃13;

Answer 1

有几件事情在发生：

首先，我将CSS更改为先移动/小屏幕。这样您就可以拥有按钮的所有样式，然后只需更改大屏幕的定位。其次，您可以轻松地为按钮组合样式，这样您就不会有一堆重复的样式。

希望这是您正在寻找的：

＆＃13;

* {
  box-sizing: border-box;
}

.bottoni,
.bottoni2 {
  position: relative;
}

.bottoni > a,
.bottoni2 > a {
  display: block;
  width: 100%;
  padding: 10px 40px;
  margin: 20px 0;
  background: rgba(0, 0, 0, 0.9);
  border-left: 15px solid #f45341;
  border-right: 3px solid #f45341;
  text-decoration: none;
  color: #fff;
  text-transform: uppercase;
  font-size: 30px;
  background: linear-gradient(to left, #f45341 50%, rgba(96, 96, 96, 0.4) 50%);
  background-position: 0% 0%;
  background-size: 200%;
  transition: background .3s ease-in-out, color .3s ease-in-out;
  font-family: pricedown;
  border-radius: 5px;
  text-align: left;
}

.bottoni > a:hover,
.bottoni2 > a:hover {
  color: #fff;
  background-position: -100% 0%;
  cursor: pointer;
}

@media screen and (min-width: 768px) {
  .bottoni,
  .bottoni2 {
    position: absolute;
    width: 300px;
    top: 50%;
    right: 0;
    transform: translatey(-100%);
  }
  .bottoni > a,
  .bottoni2 > a {
    position: relative;
    width: 300px;
  }
  .bottoni2 {
    left: 0;
    right: auto;
  }
  .bottoni2 > a {
    border-right: 15px solid #f45341;
    border-left: 3px solid #f45341;
  }
  .bottoni2 > a:hover {
    border-right: 15px solid #f45341;
  }
}

＆＃13;

<div class="bottoni">
  <a target="blank_" id="store" href="http://store.sparocraft.eu">Store</a>
  <a target="blank_" id="votaci" href="http://vota.sparocraft.eu">Votaci</a>
</div>

<div class="bottoni2">
  <a target="blank_" id="ts" class="offline" href="ts3server://ts.sparocraft.eu">TeamSpeak</a>
  <a target="blank_" id="bans" class="offline" onclick="offline();">Bans</a>
</div>

＆＃13;

这是小提琴，所以你可以看看： https://jsfiddle.net/sxcg1o7u/1/

使用@media屏幕

1 个答案: