CODEWITHSUNDEEP
htmlcssresponsive-design
Lafa
Lafa

Reputation: 523

Make this button responsive with @media screen

How can i make this buttons responsive? (with the phone) i want see the buttons with a full width, but i can't and i don't know why!

PS: You can change everything you want, but please help me!

PS2: The buttons have an animation, i know how to block this so use only this code.

If you need more information about this, just ask, i will answer you soon i can! Sorry for my bad english and thank you for the help!

.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;
  }
}
<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>

Upvotes: 0

Views: 704

Answers (1)

disinfor
disinfor

Reputation: 11533

There are a couple things going on:

First, I changed your CSS to have mobile/small screens first. This way you can have all your styles for the buttons and then just change the positioning for larger screens. Second, you can easily combine styles for your buttons so you don't have a bunch of repeating styles.

Hopefully this is what you're looking for:

* {
  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;
  }
}
<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>

Here is the fiddle so you can check it out: https://jsfiddle.net/sxcg1o7u/1/

Upvotes: 2

Related Questions