• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Clickable button with image and text and rollover state

Enthusiast ,
Oct 21, 2021 Oct 21, 2021

Copy link to clipboard

Copied

Looking for suggestions please.

After a very long break from Dreamweaver I am finding myself a little lost. Looking for an effective way to create a clean/blank interface with only two large buttons, both buttons/clickable areas to have:

  • an image as background
  • text inside
  • must have rollover state (and prefereably a brief animation during state change)
  • both text and background image to change on rollover; or text invisible on Up/Initial state

 

What methods/approaches do you suggest I follow?

Thanks in advance. 

 

Views

462

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Community Expert , Oct 22, 2021 Oct 22, 2021

See example below:

image.png

 

<!DOCTYPE html>
<html lang="en">
<head>
<title>Unique Page Title</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<style>
main {
display: flex;
flex-direction: row;
justify-content: space-around;
background-color: antiquewhite;
align-items: center;
min-height: 200px
}

div {
width: 100px;
height: 100px;
font-size: 33%;
text-align: center;
padding-top: 15%;
background: #CCC url(https://dummyim
...

Votes

Translate

Translate
Community Expert ,
Oct 21, 2021 Oct 21, 2021

Copy link to clipboard

Copied

Everything you want can be achieved very easily with CSS & HTML code.  Keep in mind that hover or rollover triggers are meaningless to touch screen devices that don't use a mouse.

https://www.w3schools.com/css/css3_transitions.asp

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Oct 21, 2021 Oct 21, 2021

Copy link to clipboard

Copied

See if this does what you want:

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  font-size: 33%;
  background: #CCC url(https://dummyimage.com/100x100) no-repeat center center;
  transition-property: width,height,font-size,background;
  transition-duration: 2s;
  transition-timing-function: linear;
}

div:hover {
  width: 300px;
  height:300px;
  font-size:100%;
  background: #CCC url(https://dummyimage.com/300x300) no-repeat center center;
}
</style>
</head>
<body>
<h1>CSS Transition Properties</h1>
<p>Hover over the div element below, to see the transition effect:</p>
<div><h1>Heading 1</h1>
<p>Lorem ipsum dolor...</p>
</div>
</body>
</html>

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Enthusiast ,
Oct 21, 2021 Oct 21, 2021

Copy link to clipboard

Copied

Thank you kindly @Nancy OShea. This is indeed a good launch point and, as always, so utterly obvious in retrospect. If I can bother you for one more fragment of information: I'm using Float Left on the div (plus a few other parameters), how do I go about having the full Div as an active hyperlink (of course without using Span, as two Divs – each with separate hyperlinks – need to appear adjacent to each other?)

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Oct 22, 2021 Oct 22, 2021

Copy link to clipboard

Copied

We don't use floats much anymore.  It's better to use CSS Flexbox: 

https://www.w3schools.com/css/css3_flexbox.asp

 

Or CSS Grids:

https://www.w3schools.com/css/css_grid.asp

 

They pose fewer pain points than floats did with less code.

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Oct 22, 2021 Oct 22, 2021

Copy link to clipboard

Copied

See example below:

image.png

 

<!DOCTYPE html>
<html lang="en">
<head>
<title>Unique Page Title</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<style>
main {
display: flex;
flex-direction: row;
justify-content: space-around;
background-color: antiquewhite;
align-items: center;
min-height: 200px
}

div {
width: 100px;
height: 100px;
font-size: 33%;
text-align: center;
padding-top: 15%;
background: #CCC url(https://dummyimage.com/100x100) no-repeat center center;
transition-property: width, height, font-size, background;
transition-duration: 1s;
transition-timing-function: linear;
}

div:hover {
width: 300px;
height: 300px;
font-size: 100%;
background: #CCC url(https://dummyimage.com/300x300) no-repeat center center;
}

a:link {
text-decoration: none;
color: darkred
}

a:hover, a:active, a:focus {
color: black;
text-decoration: underline;
}
</style>
</head>
<body>
<h1>CSS Flexbox &amp; Transitions</h1>
<p>Hover over div elements below to see transitions:</p>
<main>
<a href="https://google.com">
<div>
<h1>Heading 1</h1>
<p>Lorem ipsum dolor...</p>
</div>
</a>
<a href="https://example.com">
<div>
<h1>Heading 1</h1>
<p>Lorem ipsum dolor...</p>
</div>
</a>
<a href="https://bing.com">
<div>
<h1>Heading 1</h1>
<p>Lorem ipsum dolor...</p>
</div>
</a>
</main>
</body>
</html>

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Enthusiast ,
Oct 25, 2021 Oct 25, 2021

Copy link to clipboard

Copied

LATEST

Many thanks, this helps enormously! 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines