Hi I was just wondering how I can make my CSS button responsive?

Question

Dawn_5 0 Newbie Poster

2 Years Ago

/* CSS styles */
* {
    margin:0;
    padding: 0;
    border:0;

}


html,
body{
    background:url("/images/onebug2022heroimage.jpg")no-repeat
 center fixed;


    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    color:#000;

}

.wrapper{
    max-height: 100%}



header{
    max-width:100%;
    background-color: #0000;
    /*    padding-top: 5%;*/
    padding-bottom: 0.5%;
}


.left-col{
    max-width:35%;
    float:left;
    margin-left: 5%;
    margin-top: 2%;}

.right-col{
    width:70%;
    float:right;
}


.right-col ul{
    width: 100%;
}

.right-col ul li{
    list-style:none;
    float: right;
    display:block;
    padding-top:.4%;
    margin-left:1%;
    padding-right: 1.8%;
      }

.right-col li a{
    text-decoration:none;
    color:white;
}

h1{


    animation: type 3s steps(22);
    overflow: hidden;
    white-space: nowrap;
    font-family:'Noto sans', 'sans serif';
  clear: both;
    width: 50%;
    font-family:'Noto sans', 'sans serif';
    font-weight: 100;
    color: white;
    font-size: 2em;

    margin:0 auto;
    text-align: center;
    padding-bottom: 1%;
   }


h2{
clear: both;
    font-family:'Courgette', 'cursive';
    font-weight: 200;
    color: white;
    font-size: 2em;
    margin:0 auto;
    text-align: center;
    padding-bottom: 1%;
    width: 22ch;

}



h4{
clear: both;
    width: 10%;
    font-family:'Noto sans', 'sans serif';
    font-weight: 100;
    color: white;
    font-size: 2em;

    margin:0 auto;}

sup{ line-height:0;
font-size:65%;
}

@import url(http://fonts.googleapis.com/css?family=Raleway);
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {
    margin: 0;
    padding: 0;
    border: 0;
    list-style: none;
    line-height: 1;
    display: block;
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
     left:0%;
}
#cssmenu:after,
#cssmenu > ul:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
#cssmenu #menu-button {
    display: none;
}
#cssmenu {
    width: auto;
    font-family: Raleway, sans-serif;
    line-height: 1;
}
#cssmenu > ul {
    background: #00000;
}
#cssmenu > ul > li {
    float:left;
    -webkit-perspective: 1000px;
    -moz-perspective: 1000px;
    perspective: 1000px;
    left: 38.18%
}
#cssmenu.align-center > ul {
    font-size: 0;
    text-align: center;
}
#cssmenu.align-center > ul > li {
    display: inline-block;
    float: none;
}
#cssmenu.align-right > ul > li {
    float: right;
}
#cssmenu > ul > li > a {
    padding: 16px 20px;
    font-size: 14px;
    color: #ffffff;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    background: #505050;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
    -webkit-transform-origin: 50% 0;
    -moz-transform-origin: 50% 0;
    transform-origin: 50% 0;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
#cssmenu > ul > li.active > a {
    color: #107CBD;
}
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li > a:hover {
    color: #107cbd;
    -webkit-transform: rotateX(90deg) translateY(-23px);
    -moz-transform: rotateX(90deg) translateY(-23px);
    transform: rotateX(90deg) translateY(-23px);
    -ms-transform: none;
}
#cssmenu > ul > li > a::before {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: -1;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 16px 20px;
    color: #107cbd;
    background: #1d1d1d;
    content: attr(data-title);
    -webkit-transition: background 0.3s;
    -moz-transition: background 0.3s;
    transition: background 0.3s;
    -webkit-transform: rotateX(-90deg);
    -moz-transform: rotateX(-90deg);
    transform: rotateX(-90deg);
    -webkit-transform-origin: 50% 0;
    -moz-transform-origin: 50% 0;
    transform-origin: 50% 0;
    -ms-transform: translateY(- -18px);
        }
#cssmenu > ul > li:hover > a::before,
#cssmenu > ul > li > a:hover::before {
    background: #505050;
}
#cssmenu.small-screen {
    width: 100%;
}
#cssmenu.small-screen > ul,
#cssmenu.small-screen.align-center > ul {
    width: 100%;
    text-align: left;
}
#cssmenu.small-screen > ul > li,
#cssmenu.small-screen.align-center {
    float: none;
    display: block;
    border-top: 1px solid rgba(100, 100, 100, 0.1);
}
#cssmenu.small-screen > ul > li:hover > a,
#cssmenu.small-screen > ul > li > a:hover {
    color: #107cbd;
    -webkit-transform: none;
    -moz-transform: none;
    transform: none;
    -ms-transform: none;
}
#cssmenu.small-screen > ul > li > a::before {
    display: none;
}
#cssmenu.small-screen #menu-button {
    display: block;
    padding: 16px 20px;
    cursor: pointer;
    font-size: 14px;
    text-decoration: none;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 1px;
    background: #505050;
}
#cssmenu.small-screen #menu-button:after {
    content: "";
    position: absolute;
    right: 20px;
    top: 17px;
    display: block;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    border-top: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    width: 22px;
    height: 3px;
}
#cssmenu.small-screen #menu-button.menu-opened:after {
    border-top: 2px solid #107cbd;
    border-bottom: 2px solid #107cbd;
}
#cssmenu.small-screen #menu-button:before {
    content: "";
    position: absolute;
    right: 20px;
    top: 27px;
    display: block;
    width: 22px;
    height: 2px;
    background: #ffffff;
}
#cssmenu.small-screen #menu-button.menu-opened:before {
    background: #107cbd;
}


div nav ul li{
    text-align: left;
    display: inline;
    width: %;
    float:left;
    margin-right: .8em;
    font-family: 'Noto Sans';

}

li.changeBackground {
    background-color: #505050;
}

li.changeBackground:hover {
    background-color: ;
}

li.changeBackground:active {

background-color: #107CBD;
}

.homepage-hero-module {
    border-right: none;
    border-left: none;
    position: relative;
}

p{
    position:relative;
    width: 30%;
    padding:1em 1.5em;
    margin:2em auto;
    color: #fff;
    background:#107CBD;
    overflow: hidden;
    font-family:'Noto Sans';
}


p:before{
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    border-width: 0 16px 16px 0;
    border-style: solid;
    border-color: #fff #fff #505050 #505050;
    background: #505050;
    -web-kit-box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px; rgba(0,0,0.2);
    -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px;rgba(0,0,0.2);
    box-shadow:0 1px 1px rgba(0,0,0,0,0.3), -1px 1px 1px  rgba(0,0,0 0.2);
    /* Firefox 3.0 damage limitation*/
    display: block; width: 0;
}

p.rounded{
    -moz-border-radius: 5px 0 5px 5px;
    border-radius: 5px 0 5px 5px;
}

.p.rounded:before{
    border-width: 9px;
    border-color: #fff #fff transparent transparent;
    -moz-border-radius: 0 0 0 5px;
    border-radius: 0 0 0 5px;
}

.link{color:#e68a00;}
.link:hover { color:#d580ff; }



h3{

    font-family:'Noto-Sans', sans-serif;

}
h5{
    font-family:'Noto-Sans', sans-serif;
     float: right;
    margin-top:10px;
}

a{
  color: #fff;

}
a: hover {
  color: #fff;
}

a.btn {
  display: inline-block;
  margin: 9px 0;
  color: #000000;
  background-color: #fff;
  padding: 9px 20px;
  border-radius; 7px;
  text-decoration :none;
  font-weight: 700;
  font-size: .9em;
  }
  a.btn:: after {
    content: '100BB'; padding-left: 8px;
 }
   a.btn: hover{
   color: #fff;
   background-color: #008cda;
 }

footer{

    margin: 1px;
    height:20px;
    width: 100%;
    border-top:3px solid #107CBD;
    clear: both;
    color: #fff;
    line-height:23px;
    background-color:#505050;
    text-align:center;
    position:fixed;
        font-size:12px;
    bottom:0px;
vertical-align:baseline;


}

footer{

    width: 100%;
    padding-top:-1.0%;
    padding-bottom: 2%;
    background-color: #505050;
border-top:0px solid #107CBD;
position:fixed;
text-align:center;

html-css web-design

2 Contributors
4 Replies
114 Views
21 Hours Discussion Span
Latest Post 2 Years Ago Latest Post by Dani

Dani 4,329 The Queen of DaniWeb

2 Years Ago

Get rid of all of the:

                                          

and

                     

that is before and after the Welcome! button.

Also, you have a bug in the a.btn CSS where you have border-radius; instead of border-radius: (semi-colon instead of colon).

Now, I'm not quite sure what you're trying to do. What do you want the Welcome! button to look like? The easy fix, of course, would just be to change display: inline-block; to display:block; with the a.btn CSS.

The alternative fix would be to wrap the <a class="btn" ... button HTML with <div style="text-align:center"> and </div>.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Dani 4,329 The Queen of DaniWeb Administrator Featured Poster Premium Member · Answer 1 · 2022-06-06T23:12:54+00:00

I see that you posted your entire CSS file here, but it's impossible to understand what's going on without the HTML that actually utilizes it. For example, I'm not seeing which CSS rules you're using for your buttons (e.g. what are the classes/IDs of the buttons you want to make responsive)? And what HTML code are you using for these buttons?

Generally there is nothing specific about buttons that needs to be adjusted based on browser size.

What are you trying to accomplish here that isn't working?

Dawn_5 0 Newbie Poster · Answer 2 · 2022-06-06T23:48:25+00:00

<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8">
    <title>index</title>
    <link href="favicon-16x16.png" rel="shortcut icon" type="image/png" />
    <link href="https://fonts.googleapis.com/css?family=Noto+Sans" rel="stylesheet" type="text/css" />
    <link href="https://fonts.googleapis.com/css?family=Courgette" rel="stylesheet" type="text/css" />
    <link href="styles.css? version=1" rel="stylesheet" />
    <title></title>
    <link href="/css/index.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="wrapper">
<header>
<div class="left-col"><a href="portfolio.html"><img alt="One Bug logo" id="logo" src="/images/onebuglogoforwebdt.jpg" /></a></div>

<div class="right-col">
<ul class="social-icons">
    <li><a href="mailto:dawn@onebugdesign.com"><img class="Email" /></a></li>
    <li><a href="https://twitter.com/fraggleart"><img src="/images/Twitter-2-icon.png" style="margin:0px -9px" /></a></li>
</ul>
</div>

<div class="header-slogan">
<h1>One Bug Design</h1>

<div class="tag-line">
<h2>Designed to create<sup><small>&trade;</small></sup></h2>
</div>
</div>
</header>

<aside></aside>

<main>
<section class="section-1">
<p>Dawn here, your friendly graphic designer. Do you need someone to make your brand sparkle with desire? Someone to show your logo some love. Do you need someone who truly enjoys the overall creative process and has an eye for great design? Someone who is fluent in the ways of the Adobe CC Master. Someone who will listen and fulfill your visual communication needs. Someone who is determined and who has Ideation? Well click no further! You have arrived at your destination .....<br/>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;<a class="btn" href="portfolio.html">Welcome!</a><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<a class="link" href="https://wiseintro.co/dawnthomas"><b>Design Inspirations</b></a> <a class="link" href="http://www.linkedin.com/in/dawncthomas"><b>Linkedin Profile</b></a></p>
</section>

<section>
<h3>Software skills</h3>

<div class="wrapper">
<div class="icon"><br />
<img src="/images/Adobe-Ai-icon.png" style="margin:14px" width="36px" /> <img src="/images/Adobe-Id-icon.png" style="margin:14px" width="36px" /> <img src="/images/Adobe-Ps-icon.png" style="margin:14px" width="36px" /> <img src="/images/bridge-icon.png" style="margin:14px" width="36px" /> <img src="/images/camera-icon.png" style="margin:14px 1px" width="36px" /> <img src="/images/HTML-5-icon.png" style="margin:14px 14px" width="37px" /> <img src="/images/css-icon.png" style="margin:14px 1px" width="37px" /> <img src="/images/Office-icon.png" style="margin:14px 2px" width="37px" /></div>
</div>
</section>

<section>
<div class="text">Illustrator | Indesign | Photoshop | Bridge | DSLR | HTML5 | CSS | Microsoft Office |</div>
</section>

<aside></aside>
</main>

<footer>
<ul stlyle="list-style-type:none">
    <li class="changeBackground"><a href="index.html">Home</a></li>
    <li class="changeBackground"><a href="portfolio.html">Portfolio</a></li>
    <li class="changeBackground"><a href="finds.html">Finds</a></li>
    <li class="changeBackground"><a href="contact.html">Contact</a></li>
    <li>&copy;2022-2023 One Bug Design All Rights Reserved</li>
</ul>
&nbsp;

<div class="footer-social"><a class="twitter-follow-button" data-show-count="false" href="https://twitter.com/fraggleart?ref_src=twsrc%5Etfw">Follow @fraggleart</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> <a class="social Email"> <img class="Email" /></a></div>
</footer>
</div>
</body>
</html>

Dawn_5 0 Newbie Poster · Answer 3 · 2022-06-06T23:58:03+00:00

I would like there to be a (linked)button that says Welcome! in the area on my page where it currently has the word Welcome! linked and underlined. I am able to create the linked button however, when I view it on different browsers it is not responsive and floats around. I need it to stay in one place. I tried using media queries to make my button responsive however, I am pretty new to using them.