This question already has answers here:
How do I combine a background-image and CSS3 gradient on the same element?
(20 answers)
Closed 4 months ago.
i have a problem with a div that has an image as a backround.
When I try to give it the linear gradient, the background disappears.
Thanks for the help and sorry for the triviality of the question, but I'm a beginner
.facebook{
background-image: url(/img/facebook.jpg) linear-gradient(from left, 1 , 0);
}
.menu2style{
border-top: solid 2px white;
border-bottom: solid 2px white;
height: 24.5%;
display: flex;
padding-left: 30px;
background-repeat: no-repeat;
background-size: cover;
font-family: 'Bungee Outline', cursive;
font-weight: 900;
font-size: 90%;
justify-content: flex-start;
color: white;
padding-right: 25%;
<div class="camera2">
<div class="menu2">
<div class="menu2style facebook">FACEBOOK</div>
For example:
.facebook {
background-image: url(https://images.unsplash.com/photo-1665507254439-fe45f1417c13?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxNHx8fGVufDB8fHx8&auto=format&fit=crop&w=600&q=60), linear-gradient(to left, #000 50%, #fff 0%);
}
.menu2style {
border-top: solid 2px white;
border-bottom: solid 2px white;
height: 24.5%;
display: flex;
padding-left: 30px;
background-repeat: no-repeat;
background-size: cover;
font-family: 'Bungee Outline', cursive;
font-weight: 900;
font-size: 90%;
justify-content: flex-start;
color: white;
padding-right: 25%;
}
<div class="camera2">
<div class="menu2">
<div class="menu2style facebook">FACEBOOK</div>
</div>
</div>
So I decided to do my portfolio website on my own, which turned out to work pretty ok so far. The only problem is that I can't seem to make it display properly on mobile view. That's even though I've made all the pertinent changes on the css with "#media screen"
Can somebody take a look and tell me why it's doing what it's doing?
To see the problem, go to https://er-sc.com/HTML/image_making.html
on mobile view
In the proper way the image shouldn't cover the "about" button.
Also if you notice anything I could correct to make the website better, let me know.
Looking forward to the community's feedback and suggestions.
Best,
Ellie
Here's my HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>ERSC Image Making</title>
<link rel="icon" type="image/x-icon" href="/images/favicon.ico">
<link href="../CSS/styles.css" rel="stylesheet" type="text/css">
</head>
<body id="bigwrapper">
<div class="topleft">
<a class="logoButton" href="https://www.er-sc.com/">E</a>
</div>
<div class="bottomleft">
<a class="logoButton" href="https://www.er-sc.com/">S</a>
</div>
<div class="topright">
<a class="logoButton" href="https://www.er-sc.com/">R</a>
</div>
<div class="bottomright">
<a class="logoButton" href="https://www.er-sc.com/">C</a>
</div>
<div class="bottomcenterLinks">
ABOUT
</div>
<div class="projectWrapper">
<div class="oneProject">
<div class="text">Happy Dancer, 2022</div>
<img src="/images/image-making/22-happy-dancer_k.jpg" alt="figure jumping">
</div>
<div class="oneProject">
<div class="text">Relief, 2022</div>
<img src="/images/image-making/22-0127_1__0020_Ebene-21-Wiederhergestellt_k.jpg" alt="3D extrusion of a scribble with plaster texture">
</div>
<div class="oneProject">
<div class="text">Didi, 2021</div>
<img src="/images/image-making/21-1210didi_k.jpg">
</div>
<div class="oneProject">
<div class="text">Dancing Flowers pt I, 2021</div>
<img src="/images/image-making/21-IG1_k.jpg">
</div>
<div class="oneProject">
<div class="text">Dancing Flowers pt II, 2021</div>
<img src="/images/image-making/21-IG2_k.jpg">
</div>
<div class="oneProject">
<div class="text">Sad Clown, 2021</div>
<img src="/images/image-making/21-200126_3D_1_k.jpg">
</div>
<div class="oneProject">
<div class="text">Alpine Anime (fictitious festival poster for Livia Rita), 2020</div>
<img src="/images/image-making/20-AlpineAnime_k.jpg">
</div>
<div class="oneProject">
<div class="text">Europa Endlos, 2019</div>
<img src="/images/image-making/19-europaendlos-scan_k.jpg">
</div>
<div class="oneProject">
<div class="text">Ascension, 2018</div>
<img src="/images/image-making/18-plakat_klein_ersc_k.jpg">
</div>
<div class="oneProject">
<div class="text">Seoul Impressions 1/4, 2018</div>
<img src="/images/image-making/18-1_k.jpg">
</div>
<div class="oneProject">
<div class="text">Seoul Impressions 2/4, 2018</div>
<img src="/images/image-making/18-7_k.jpg">
</div>
<div class="oneProject">
<div class="text">Seoul Impressions 3/4, 2018</div>
<img src="/images/image-making/18-9_k.jpg">
</div>
<div class="oneProject">
<div class="text">Seoul Impressions 4/4, 2018</div>
<img src="/images/image-making/18-10_k.jpg">
</div>
</div>
</body>
</html>
And here's my CSS
html,
#index {
height: 100%;
width: 100%;
background: radial-gradient(circle, hsla(295, 79%, 24%, 1) 0%, hsla(71, 66%, 78%, 1) 40%, hsla(318, 76%, 81%, 1) 74%, hsla(202, 27%, 45%, 1) 100%););
color: #551A8B;
font-family: sans-serif;
font-size: 1em;
background-attachment: fixed;
display: flex;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
#bigwrapper{
height: 100%;
width: 100%;
background: radial-gradient(circle, hsla(295, 79%, 24%, 1) 0%, hsla(71, 66%, 78%, 1) 40%, hsla(318, 76%, 81%, 1) 74%, hsla(202, 27%, 45%, 1) 100%););
color: #551A8B;
font-family: sans-serif;
font-size: 1em;
background-attachment: fixed;
display: flex;
display: -webkit-flex;
display: flex;
-webkit-align-items: top !important;
align-items: top !important;
-webkit-justify-content: center;
justify-content: center;
}
#font-face {
font-family: 'FT88-Italic';
font-style: normal;
font-weight: 400;
src: url('/fonts/FT88-Italic') format('woff2');
}
p {
font-family: 'FT88-Italic', sans-serif;
}
h1 {
font-family: 'FT88-Italic', sans-serif;
font-size: 2vw;
font-weight: normal;
}
.socials{
font-size: 2vw;
}
a {
text-decoration: none;
color: #551A8B;
font-family: sans-serif;
}
mark {
background-color: rgba(85, 26, 139, 1);
color: white;
border-radius: 0.3em;
}
#wrapper {
height: 80%;
width: 80%;
padding: 0em;
}
.extraBG {
z-index: 1000;
height: 100vh;
width: 50vw;
position: fixed;
background-color: red;
right: 0%;
top:0%
background-repeat: repeat;
background-position: top right;
background-attachment: fixed;
}
.topleft{
position: fixed;
top: 3%;
left: 3%;
z-index: 100;
}
.bottomleft{
position: fixed;
bottom: 3%;
left: 3%;
z-index: 100;
}
.topright{
position: fixed;
top: 3%;
right: 3%;
z-index: 100;
}
.bottomright{
position: fixed;
bottom: 3%;
right: 3%;
z-index: 100;
}
.bottomcenterLinks{
position: fixed;
bottom: 5%;
text-align: center;
text-decoration: none;
vertical-align: middle;
display: table-cell;
font-family: "FT88-Italic", sans-serif;
font-size: 3vh;
color: floralwhite;
}
.bottomcenterLinks a {
color: floralwhite;
text-shadow: 0px 0px 0.25em #551A8B;
}
.bottomcenterLinks a:hover {
color: floralwhite;
text-shadow: 0px 0px 0.15em floralwhite;
transition: 0.6s ease;
}
.bottomcenterLinks a:active {
color: floralwhite;
text-shadow: 0px 0px 0.15em floralwhite;
transition: 0.6s ease;
}
.bottomSmall{
text-align: center;
font-size: 0.8em;
align-self: flex-end;
}
.logoButton {
background-color: floralwhite;
font-family: sans-serif;
width: 8vh;
height: 8vh;
text-align: center;
vertical-align: middle;
text-decoration: none;
display: table-cell;
font-size: 3vh;
cursor: pointer;
border-radius: 100%;
z-index: 999;
position: relative;
box-shadow: inset 6px -6px 8px 1px rgba(224, 211, 185, 0.8), inset -16px 14px 10px 5px rgba(255, 255, 255, 0.8);
transition: 0.25s ease;
text-transform: uppercase;
z-index: 999;
filter: blur(0.05em);
-webkit-filter: blur(0.05em);
}
.logoButton:hover, .logoButton:active{
box-shadow: inset 6px -6px 0.8em 1px rgba(255, 255, 255, 0.8), inset -16px 18px 0.8em 0.05em rgba(224, 211, 185, 0.8);
filter: blur(0em);
-webkit-filter: blur(0em);
}
.centeredBox{
margin: auto;
border-radius: 5em;
background: floralwhite;
text-align: center;
font-size: 1.2em;
padding: 0.6em;
vertical-align: middle;
margin: auto;
height: 90%;
display: flex;
flex-wrap : nowrap;
flex-direction: column;
justify-content: center;
align-items : stretch;
flex-direction: column;
align-content : space-between;
/* box-shadow: inset 6px -6px 0.5em 1px rgba(224, 211, 185, 0.5), inset -16px 14px 10px 5px rgba(255, 255, 255, 0.8);
transition: 0.25s ease;
*/
}
.centeredBox small{
text-align: center;
align-content : flex-end;
}
.part1, .part2, .part3, .part4, .part5{
border-radius: 100em;
background: floralwhite;
text-align: center;
box-shadow: inset 6px -6px 0.5em 1px rgba(224, 211, 185, 0.5), inset -16px 14px 10px 5px rgba(255, 255, 255, 0.8);
transition: 0.25s ease;
vertical-align: middle;
filter: blur(0.1em);
-webkit-filter: blur(0.1em);
}
.part1:hover, .part2:hover, .part3:hover, .part4:hover, .part5:hover, .part5:active {
box-shadow: inset -21px 26px 50px -51px #FFFAF0, inset 10px -13px 50px -31px #FFFAF0, inset 34px -36px 50px 35px rgba(255, 255, 255, 0.6), inset -31px 37px 50px 32px rgba(224, 211, 185, 0.25);
filter: blur(0em);
-webkit-filter: blur(0em);
}
/*
.centeredBox, .slideshowBox{
width:100%;
height: 100%;
float: left;
}
*/
.centeredBox p {
position: relative;
padding: 1em;
height:20px;
top: 5%;
transform: translateY(-50%);
text-align: center;
vertical-align: middle;
}
.part1 {
width:50%;
height: 30%;
float: left;
}
.part1 p{
position: relative;
height:20px;
top: 40%;
transform: translateY(-50%);
}
.part2 {
width:50%;
height: 30%;
float: left;
}
.part2 p{
position: relative;
height:20px;
top: 40%;
transform: translateY(-50%);
}
.part3 {
width:50%;
height: 30%;
float: left;
}
.part3 p{
position: relative;
height:20px;
top: 40%;
transform: translateY(-50%);
}
.part4 {
width:50%;
height: 30%;
float: left;
}
.part4 p{
position: relative;
height:20px;
top: 40%;
transform: translateY(-50%);
}
.part5 {
width:65%;
height: 33%;
margin: auto;
display:flex;
justify-content: center;
vertical-align: middle;
}
.part5 p {
position: relative;
text-align: center;
vertical-align: middle;
font-size: 6vw;
margin: auto;
/* transform: translateY(-50%); */
}
.selected{
color: #FFFAF0;
filter: blur(0.05em);
}
.slideshowBox{
border-radius: 4em;
background: floralwhite;
text-align: center;
font-size: 1.2em;
filter: drop-shadow(10px,10px,orange);
}
.slideshow-container{
height: 100%;
width: 90%;
padding-top: 0em;
padding-bottom: 0em;
border-radius: 4em;
margin: auto;
text-align: center;
vertical-align: middle;
}
.mySlides {
display: none;
text-align: center;
vertical-align: middle;
}
.projectWrapper {
z-index: 10;
display: inline-block;
text-align: center;
vertical-align: top;
margin-top: 5em;
/*overflow-y: scroll;
scroll-snap-type: y mandatory;*/
padding-bottom: 7.5em;
}
.oneProject {
padding-bottom: 7.5em;
/*scroll-snap-align: start;
scroll-snap-stop: always;*/
}
img {
/* vertical-align: middle; */
border-radius: 1em;
max-height: 75vh;
max-width: 75vw;
margin: auto;
display: block;
text-align: center;
}
.imgSmall {
max-height: 70vh;
}
/* Next & previous buttons */
.prev {
vertical-align: middle;
cursor: pointer;
position: absolute;
top: 10%;
left: 0em;
width: 40%;
padding-top: 17em;
padding-bottom: 17em;
color: rgba(0, 0, 0, 0);
font-size: 1.2em;
transition: 0.6s ease;
user-select: none;
}
/* Position the "next button" to the right */
.next {
vertical-align: middle;
cursor: pointer;
position: absolute;
top: 10%;
right: 0em;
width: 40%;
padding-top: 17em;
padding-bottom: 17em;
color: rgba(0, 0, 0, 0);
font-size: 1.2em;
transition: 0.6s ease;
user-select: none;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
color: rgba(0, 0, 0, 0);
}
/* Caption text */
.text {
font-size: 1.2em;
position: relative;
margin: auto;
display: block;
text-align: center;
padding-bottom: 0.5em;
font-family: sans-serif;
}
/* Fading animation */
.fade {
animation-name: fade;
animation-duration: 1.5s;
}
#keyframes fade {
from {opacity: .6}
to {opacity: 1}
}
#media screen and (max-width: 1200px) {
h1 {
font-size: 4vw;
}
.socials {
font-size: 3vw;
}
.bottomcenterLinks {
font-size: 3vh;
}
.selected {
font-size: 3vh;
}
.centeredBox small{
font-size: 3vw;
}
}
#media screen and (max-width: 800px) {
.oneProject {
margin-bottom: 40%;
}
.projectWrapper {
margin-top: 30%;
}
.logoButton {
filter: blur(0.03em);
-webkit-filter: blur(0.03em);
}
.part5 {
filter: blur(0.06em);
-webkit-filter: blur(0.06em);
}
}
so, I think that it's because you added z-index directly to the about link tag in your css. Try adding z-index to the link wrapper div, in this case "bottomcenterLinks".
.bottomcenterLinks{
position: fixed;
bottom: 5%;
text-align: center;
text-decoration: none;
vertical-align: middle;
display: table-cell;
font-family: "FT88-Italic", sans-serif;
font-size: 3vh;
color: floralwhite;
z-index: 100;
}
now, a feedback for your website design:
it's a pretty innovative design but thinking in user experience i would change the buttons because when we first get into the page we can't understand the purpose of the buttons because they don't have proper names, I mean, self explanatory names. i understand that you wanted to use your name first letters but for the purpose of a portfolio or even another type of website you're building, I think is better building something that will literaly guide the user through the website. think about it!
also, this about link that you're trying to make appear, i think it would be better if you style it like the buttons with your name first letters, it would make it stand out better. oh and i think that instead of having only about, you could have about me written there because when I first saw it I couldn't understand what that about link is supposed to be I mean, is about what, the projects, you, the page?
last but not less important, the blur in your buttons in a user perspective seems like the content is not in a good quality. i don't understand what you wanted it to look like but if you like it that way, no need to change, except if you want to prioritize user exp! besides this, i wouldn't fix anything else, i really enjoyed your design, is cute, innovative, simple, you're doing well!
sry about the big comment tho, but i hope you understand my feedback!
Hover gradient and background image with smooth in and out transition
so I am making a website. background-color: #212121; that has come to have a hover gradient with the background image with smooth in and out transition.
now, the transition is not smooth. It is flashing.
But one thing without changing the position and size of the .amsecta. can you help me?
<section class="m-containera">
<div class="am-secta">
<div class="contenta">
<div class="titls">Stream your favourite <br class="inlin md:hidden"> tracks right now</div>
<div class="par"> <i class="fab fa-spotify"> </i>Spotify Playlist</div>
</div>
<div class="iframe-container">
<iframe src="https://open.spotify.com/embed/artist/6ffL1W3QlzZGnP90Ffi3kY?theme=0" frameBorder="0" allowtransparency="true" allow="encrypted-media"></iframe>
</div>
</div>
</section>
body{
background-color: 212121;
}
.iframe-container {
padding-top: 29.25%;
position: relative;
}
.iframe-container iframe {
border: 0;
height: 360px;
left: 15%;
position: absolute;
top: 0px;
width: 70%;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
transition: box-shadow 0.3s ease-in-out;
}
.iframe-container iframe:hover {
box-shadow: 0 5px 20px rgb(0 0 0 / 160%);
}
.m-containera {
width: 100%;
max-width: 1517px;
margin: 0 auto;
align-content: center;
text-align: center;
}
.am-secta {
padding-top: 40px;
padding-bottom: 40px;
background-color: #212121;
z-index: 1;
transition: color 0.3s ease-in-out;
}
.am-secta:hover{
background-image:linear-gradient(180deg, rgba(33,33,33,1) 0%, rgba(29,185,84,0.5) 100%),
url("http://www.piyushcares.com/wp-content/uploads/2018/11/homepagevid.png");
background-repeat: no-repeat; /*if you have full size image then use no-repeat*/
background-position: center center top;
background-size:cover;
}
.contenta {
padding: 0 10px;
}
.titls {
font-size: 34px;
font-weight: 700;
text-align: center;
color: white;
font-family: 'Raleway';
}
.par { color: white;
text-align: center;
font-weight: normal;
font-size: 20px;
line-height: 1.5;
padding-top: 10px;
padding-bottom: 45px;
font-family: 'Raleway';
}
.inlin {
display: none;
}
.bold {
font-weight: 700;
}
Maybe, you are looking for this:
.am-secta {
padding-top: 40px;
padding-bottom: 40px;
background-color: #212121;
z-index: 1;
transition: color 0.3s ease-in-out;
}
.am-secta:hover{
background-image:linear-gradient(180deg, rgba(33,33,33,1) 0%, rgba(29,185,84,0.5) 100%),
url("http://www.piyushcares.com/wp-content/uploads/2018/11/homepagevid.png");
background-repeat: no-repeat; /*if you have full size image then use no-repeat*/
background-position: center center top;
background-size:cover;
}
I am currently developing a styleguide and the hover-state of my navigation is giving me some headache, but I am pretty sure, that it could be solved very easily, so I just want to ask, if someone has an idea.
My html looks like this:
<nav class='components__navigation'>
<a href='../index.html'><img class='styleguide__logo' src='../imgs/Logo.png' alt='Logo'></a>
<ul class='components__navListTop'>
<li class='components__navItem'><a href='#'>Design</a></li>
<li class='components__navItem' id='active'><a href='components.html'>Components</a></li>
<li class='components__navItem'><a href='#'>Motionguide</a></li>
</ul>
</nav>
and my css looks like this:
.components__navigation {
display: flex;
height: 75px;
align-items: center;
padding-left: 50px;
border-bottom: 4px solid #f5f5f5;
}
.components__navigation img {
width: 250px;
height: 40px;
margin-right: 100px;
}
.components__navListTop {
font-size: 14px;
display: flex;
list-style: none;
padding: 0;
}
.components__navListTop a {
color: #333;
text-decoration: none;
margin-right: 50px;
}
.components__navItem a {
text-decoration: none;
background-image: linear-gradient(#ffda00,#ffda00),linear-gradient(#fff,#fff);
background-size: 0 3px,auto;
background-repeat: no-repeat;
background-position: bottom;
transition: background .2s linear;
}
.components__navItem a:hover {
background-size: 100% 3px,auto;
}
#active a {
background-image: linear-gradient(#ffda00,#ffda00),linear-gradient(#fff,#fff);
background-size: 100% 3px,auto;
background-repeat: no-repeat;
background-position: bottom;
}
Here is a pen to make it more visual:
https://codepen.io/dbljn/pen/abbMdVE
The current hover-state is right under the font of the tabs, but I want the hover-state to be where the gray border is. Like so:
Do you have an idea? And thanks a lot!!
It is always a good practice to write similar styling rules when the elements are overlapping on each other.
for example, we could use the same background-image property with nav html element instead of border property
.components__navigation {
display: flex;
align-items: center;
padding-left: 50px;
background-image: linear-gradient(transparent 90%, #f5f5f5 0);
}
remove the margin from ul element and background-image from below selectors so that the nav element will spread on li element and will be dynamic
.components__navListTop {
font-size: 14px;
display: flex;
list-style: none;
padding: 0;
margin: 0;
}
.components__navListTop a {
color: #333;
text-decoration: none;
}
finally give the li element its background-image and other CSS rules,
.components__navItem {
padding: 20px 0;
margin-right: 50px;
background-image: linear-gradient(transparent 90%,#ffda00 0);
background-size: 0;
background-repeat: no-repeat;
background-position: bottom;
transition: background .2s linear;
}
Since you want the animation while hovering on li element, the :hover pseudo attribute should be present on this li element, also it's good to use classes instead of id
.components__navItem:hover, .active {
background-size: 100%;
}
Finally putting it all together,
body, html {
margin: 0;
}
.components__navigation {
display: flex;
align-items: center;
padding-left: 50px;
background-image: linear-gradient(transparent 90%, #f5f5f5 0);
}
.components__navigation img {
width: 250px;
height: 40px;
margin-right: 100px;
}
.components__navListTop {
font-size: 14px;
display: flex;
list-style: none;
padding: 0;
margin: 0;
}
.components__navListTop a {
color: #333;
text-decoration: none;
}
.components__navItem {
padding: 20px 0;
margin-right: 50px;
background-image: linear-gradient(transparent 90%,#ffda00 0);
background-size: 0;
background-repeat: no-repeat;
background-position: bottom;
transition: background .2s linear;
}
.components__navItem:hover, .active {
background-size: 100%;
}
<nav class='components__navigation'>
<a href='../index.html'><img class='styleguide__logo' src='../imgs/Logo.png' alt='Logo'></a>
<ul class='components__navListTop'>
<li class='components__navItem active'><a href='#'>Design</a></li>
<li class='components__navItem'><a href='components.html'>Components</a></li>
<li class='components__navItem'><a href='#'>Motionguide</a></li>
</ul>
</nav>
Try replacing .components__navItem a with:
.components__navItem a {
text-decoration: none;
background-image: linear-gradient(#ffda00,#ffda00);
background-size: 0 3px,auto;
background-repeat: no-repeat;
background-position: bottom;
transition: background .2s linear;
padding-bottom: 33px;
}
This is assuming a fixed font size though.
I want to add an opaque button in such a way that I can see the background image and the button can still be clicked, like the sign-in button in the above image. How would I go about this?
Here is my HTML:
<html>
<head>
<title>Subjects</title>
<style>
body{
background-color:black;
background-repeat: no-repeat;
background-size: 100% 100%;
}
.title {
height: 62px;
width: 231px;
background-color:#446CB3;
border-bottom-left-radius: 25px;
margin-top: 81px;
margin-left: 28px;
}
</style>
</head>
<body>
<div class="title">
</div>
</body>
</html>
You mean like... a transparent link?
body {
background: #ccc url('http://lorempixel.com/g/1024/768') no-repeat 50% 50% /cover;
margin: 0;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
a {
color: white;
border: 2px solid white;
padding: 2rem;
font-size: 3rem;
}
Transparent link
Or an invisible link?
body {
background: #ccc url('http://lorempixel.com/g/1024/768') no-repeat 50% 50% /cover;
margin: 0;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
a {
padding: 2rem;
font-size: 3rem;
opacity: 0;
}
Invisible link
A very simple way is to use rgba colors in background of your button:
background-color:rgba(255, 255, 255, 0.2);
Example:
<html>
<head>
<title>Subjects</title>
<style>
body{
background-color:black;
background-repeat: no-repeat;
background-size: 100% 100%;
}
.title {
height: 20px;
width: 231px;
background-color:rgba(255, 255, 255, 0.2);
border: solid 2px #fff;
border-radius: 4px;
margin-top: 81px;
margin-left: 28px;
color: #fff;
text-align:center;
padding:16px;
}
</style>
</head>
<body>
<div class="title">
Sign up!
</div>
</body>
</html>
set the button element an opacity property
https://www.w3schools.com/csS/css_image_transparency.asp