1 reply [Last post]
danjde
danjde's picture
Offline
newbie
Italy
Last seen: 6 days 30 min ago
Italy
Timezone: GMT+1
Joined: 2015-06-23
Posts: 2
Points: 4

Hi Friends,
I've a template native css class for button, and would like to insert two texts in the button, the first text can use the template classes, for the second text (which is a disclaimer) I would like set carriage return and smaller text.

The page is this: https://www.staccoexperience.com/home/experience/

and the button should be so: https://ibb.co/iGp2sq

Actually I've customized the button only here:

.button.colored.outline, .button.colored.solid:hover {
    color: #fff;
}
.button.colored.outline {
    background-color: #cf9f24;
}
.button.colored.outline:hover {
    background-color: transparent;
}
.button.colored.outline:hover {
    color: #cf9f24;
		font-weight: bold;
}
.button, button, input[type="submit"] {
    padding: 20px 40px 20px 40px;
 
}

What is for you the better way?

Many thanks!

Davide

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 10 hours 41 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9710
Points: 3786

Two font sizes

Is this what you're looking for?

<!DOCTYPE HTML>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta content=
    "width=device-width, height=device-height, initial-scale=1"
          name="viewport">
    <title>
      Test document
    </title>
 
    <style media="screen">
    /*<![CDATA[*/
 
    body, html {
	font: 100%/1.5 sans-serif;
	margin:0;
	padding: 0;
    }
 
    p {
	font-size: 1em;
	margin-bottom: 0;
    }
 
    h1, h2, h3 {
	font-family: serif;
    }
 
    h1 {
	text-align: center;
        text-transform: capitalize;
    }  /* end boiler plate */
 
    button span#fineprint {
	display: block;
	font-size: xx-small;
    }
 
    /*]]>*/
    </style>
  </head>
 
  <body>
    <h1>
      One button — two font sizes
    </h1>
 
    <button>line one<span id="fineprint">*line two</span></button>
  </body>
</html>

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.